`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 &lt; 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-Token
export 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上。

第一个方法的入参：

第一个方法的返回值：

第二个方法的入参：

完成！！！多多积累，多多收获！！！

antd上传组件upload+阿里oss实现上传功能相关推荐

上传文件到阿里oss
上传文件到阿里oss 代码示例阿里云官方文档项目中一般会遇到上传图片或者文件到oss上,本次采用阿里云的oss,上传方式有两种:一种是先上传到服务器再上传到oss然后删除服务器上的文件,第二种直接 ...
轻松搞定阿里OSS文件上传和图片下载
轻松搞定阿里OSS文件上传和图片下载目录 1. 阿里云oss账号准备 1.1 注册阿里云账号,并开通OSS存储服务 1.2 创建RAM子用户并使用子账户的AccessKeyId和Access ...
Win10下用SCP命令免密码上传、下载阿里云服务器上的文件
需求: 需要定时把阿里云服务器上的数据备份文件下载到本地备份,所以需要在本地win10系统上定时执行从阿里云服务器上下载备份文件的操作. 环境和工具本地win10系统及自带的SCP工具,工具目录:C ...
容器单机编排工具 Docker Compose，swap 限制，配置默认的CFS调度程序，Stress-ng 压力测试工具，docker官网镜像上传，及阿里云镜像上传，Docker 的资源限制
目录 Docker Compose介绍有版本问题一键生成 docker-compose.yml docker官网镜像上传,及阿里云镜像上传 Docker 之分布式仓库 Harbor Docke ...
element-ui upload 上传组件附带额外参数进行上传（表单形式，多个参数）
之前一直使用upload组件单个上传文件,最近遇到需要上传表单字段,表单中有多个参数下图是接口要求: 官网上传组件中提供了响应的功能实现,但是demo中未演示,不注意看文档参数的话,可能会不知道这个 ...
js 导出pdf上传至oss_js实现oss文件上传及一些问题
关于兼容性问题,ie8以下的可以使用4.x的版本一.引入sdk和jq 二.基本配置 var client =newOSS.Wrapper({ region:'', accessKeyId:'', a ...
elementui 上传请求头_element-ui上传组件多个文件同时上传请求一次后台接口（前后端代码版）...
记录时间 2020年10月27日 22点38分前言在使用element-ui上传组件上传多个文件时,出现多个文件对应着多个请求,比如你要上传3个文件,那么将请求3个后台接口,这样会无形之中增加了后 ...
使用Apache文件上传组件实现web页面文件上传
用servlet的upload功能实现文件上传很繁琐,代码量很大.可以用fileupload library组件实现文件上传,具体操作步骤如下: 1. 下载相关组件(commons-fileuploa ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...

antd上传组件upload+阿里oss实现上传功能

`antd上传组件upload+阿里oss实现上传功能`

1.后端提供接口直接上传到阿里oss，返回转化后的链接地址

1.1 html部分代码

1.2 script部分代码

2.后端提供接口不提供上传到阿里oss，需要前端处理文件数据

2.1 html部分的代码

2.2 上传之前的请求——`beforeUpload`

2.3 自定义上传方法——`customRequest`

2.4 upFileToOSS 方法的封装

antd上传组件upload+阿里oss实现上传功能相关推荐

最新文章

热门文章

antd上传组件upload+阿里oss实现上传功能

antd上传组件upload+阿里oss实现上传功能

1.后端提供接口直接上传到阿里oss，返回转化后的链接地址

1.1 html部分代码

1.2 script部分代码

2.后端提供接口不提供上传到阿里oss，需要前端处理文件数据

2.1 html部分的代码

2.2 上传之前的请求——beforeUpload

2.3 自定义上传方法——customRequest

2.4 upFileToOSS 方法的封装

antd上传组件upload+阿里oss实现上传功能相关推荐

最新文章

热门文章

`antd上传组件upload+阿里oss实现上传功能`

2.2 上传之前的请求——`beforeUpload`

2.3 自定义上传方法——`customRequest`