antd上传组件upload+阿里oss实现上传功能
阿里oss上传是目前前端同事比较习惯使用的上传方式，同样的上传方式还是七牛等，下面记录以下阿里oss上传的使用步骤：
最近在写后台管理系统，遇到上传组件的功能，由于框架使用的是antd，因此此处记录一下上传功能。
1.后端提供接口直接上传到阿里oss，返回转化后的链接地址
直接上代码：
1.1 html部分代码
<a-upload list-type="picture-card" :file-list="fileList_cover" :before-upload="beforeUpload_cover"@change="handleChange_cover" :action="API + '/api/app/up-load-file/upload-file'" :headers="headers" :remove="remove_cover" :data="file_data" accept="image/*"><div v-if="fileList_cover.length < 1"><a-icon type="plus" /><div class="ant-upload-text">上传</div></div></a-upload>
1.2 script部分代码
import Cookie from 'js-cookie';data(){return{fileList_cover:[],API:process.env.VUE_APP_API_BASE_URL,//这个是从环境配置文件中取接口地址,headers:{Authorization:Cookie.get('Authorization')},file_data:{dirName:'Notice',fileType:'image'}}},methods:{beforeUpload_cover(file,fileList){if(file.type.indexOf('image/')==-1){this.$message.error('请上传图片类型');return false;}},handleChange_cover({file,fileList,event}){this.fileList_cover = fileList;//此时的fileList_cover是一个文件的集合，其中的response.data.fileUrl就是图片地址了。}}
接口的入参：
接口的返回值：
这个是接口会处理阿里oss的数据的情况。
2.后端提供接口不提供上传到阿里oss，需要前端处理文件数据
推拽上传，使用的是下面的组件
2.1 html部分的代码
<a-upload-draggername="file":multiple="false":show-upload-list="false":before-upload="beforeUpload":customRequest="customRequest"><p class="ant-upload-drag-icon" v-if="!form.fileUrl"><a-icon type="cloud-upload" style="font-size:30px;" /></p><p class="ant-upload-drag-icon" v-else><a :href="form.fileUrl">{{form.fileName }}</a></p><p class="ant-upload-hint">Please upload 2D files(dwg, dxf, pdf)/3D files:(.step, .stp,.sldprt, .prt, .CATPart) or zip files. Drag and drop or click toselect your files, File size < 200 MB</p><span class="btnCls getBtn">Selet File</span></a-upload-dragger>
我这边使用的方法有两个，一个是beforeUpload上传之前的请求，可以对文件格式和大小进行判断。一个是customRequest，自定义上传方法。
2.2 上传之前的请求——beforeUpload
beforeUpload(file) {let arr = file.name.split('.');this.form.fileName = file.name;let supportList = ['zip','rar','dwg','dxf','pdf','step','stp','sldprt','prt','CATPart',];if (supportList.indexOf(arr[arr.length - 1].toLowerCase()) == -1) {this.$message.error(`Upload failed: upload file format is not supported`);return false;}const isLt1M = file.size / 1024 / 1024 < 200;if (!isLt1M) {this.$message.error('Upload file size cannot exceed 200MB!');return;}return true;},
2.3 自定义上传方法——customRequest
async customRequest(file) {console.log('file111', file);let resUpInfo = await upFileToOSS(file, file.file.name);console.log(resUpInfo, 222);if (resUpInfo.url) {this.form.fileUrl = resUpInfo.url;this.$forceUpdate();}}
上面方法中用到了upFileToOSS方法，这个方法是下面js中引入的。
2.4 upFileToOSS 方法的封装
import { upFileToOSS } from '@/services/UpFileDrag';
import {METHOD, request } from '@/utils/request';//GetAliOSS Policy-Tokenexport function getAliOSSPolicyToken(name) {return new Promise((resolve, reject) => {request(`/api/Client/aliyun/cnc-policy-token?FileName=${name}&Module=fahubs`,METHOD.GET).then((res) => {resolve(res);}).catch((err) => {reject(err);});});}export function upFileToOSS(file, name) {let fileInfo = file.file;return new Promise((resolve, reject) => {getAliOSSPolicyToken(name).then((res) => {let fileUrl = res.dir + getRandomString(8) + '.' + getFileSuffix(name);let fmData = new FormData();fmData.append('host', res.host);fmData.append('key', fileUrl);fmData.append('policy', res.policy);fmData.append('OSSAccessKeyId', res.accessid);fmData.append('success_action_status', 200);fmData.append('callback', res.callback);fmData.append('signature', res.signature);fmData.append('file', fileInfo);console.log('res22222', res, fmData, fileUrl);let xmlhttp = null;if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else if (window.ActiveXObject) {xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');}try {xmlhttp.onreadystatechange = function() {// if (xmlhttp.status == 200 && xmlhttp.statusText == 'OK') {resolve({status: 1,msg: 'ok',size: fileInfo.size,name: fileInfo.name,url: res.host + fileUrl,});};console.log('res', res, fmData);xmlhttp.open('POST', res.host, true);xmlhttp.send(fmData);} catch (err) {reject({status: 0,msg: 'err',});}//随机文件名function getRandomString(len) {let _charStr ='abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789',min = 0,max = _charStr.length - 1,_str = ''; //定义随机字符串 变量//判断是否指定长度，否则默认长度为15len = len || 15;//循环生成字符串for (var i = 0, index; i < len; i++) {index = (function(randomIndexFunc, i) {return randomIndexFunc(min, max, i, randomIndexFunc);})(function(min, max, i, _self) {let indexTemp = Math.floor(Math.random() * (max - min + 1) + min),numStart = _charStr.length - 10;if (i == 0 && indexTemp >= numStart) {indexTemp = _self(min, max, i, _self);}return indexTemp;}, i);_str += _charStr[index];}return _str;}//获取文件名后缀function getFileSuffix(pathfilename) {var reg = /(\\+)/g;var pString = pathfilename.replace(reg, '#');var arr = pString.split('#');var lastString = arr[arr.length - 1];var arr2 = lastString.split('.');return arr2[arr2.length - 1];}}).catch((err) => {reject({status: 0,msg: 'err',});});});}
上面就是前端自行处理oss部分，然后拿到链接后进行其他操作。
上面的方法，其实走了两个接口，第一个接口，获取阿里oss的配置参数，第二个接口，将文件上传到阿里oss上。
第一个方法的入参：
第一个方法的返回值：
第二个方法的入参：
完成！！！多多积累，多多收获！！！
