[JavaScript知识库]在Vue中COS高级上传与antDesign的结合使用

首先, 先在腾讯云上设置好规则, 不然会报CROS跨域或者其他错误

主要是COS的高级上传

<template>
    <a-upload
      name="file"
      :multiple="false"
      :customRequest="actionFunc"
      @change="fileChange"
    >
      <a-button> <a-icon type="upload" />上传文件</a-button>
    </a-upload>
</template>
<srcipt>
const COS = require('cos-js-sdk-v5');
const cosf = new COS({
  SecretId: '...', // id和key自行查看
  SecretKey: '...',
});
export default {
	methods:{
		// isfromFunc用来判断是来自组件上传按钮点击还是actionFunc的调用, fileChange早于fileChange调用
		fileChange(e, isfromFunc){
			// 注意, 当isfromFunc为true时, 注意点击组件的上传按钮时获取到的数据结构是不同的
			if(isfromFunc){
				 if(e.status === "done"){
				 	  // 修改组件的状态
			          return this.file.status = "done";
		         } else if(e.status === "error"){
				 	  // 修改组件的状态
			          return this.file.status = "error";
		         }
			}else{
				this.file = e.file;
			}
		},
		actionFunc(e){
			let that = this;
			 cosf.uploadFile({
		        Bucket: '存储桶', /* 填入您自己的存储桶，必须字段 */
		        Region: '存储桶所在地',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
		        Key: e.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
		        Body: e.file,               /* 必须 */
		        SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值，超过5MB使用分块上传，非必须 */
		        // onTaskReady: function(taskId) {                   /* 非必须 */
		        //   console.log('onTaskReady ---->',taskId);
		        // },
		        // onProgress: function (progressData) {           /* 非必须 */
		        //   console.log('onProgress ---->',JSON.stringify(progressData));
		        // },
		        onFileFinish: function (err, data, options) {   /* 非必须 */
		          //文件上传成功后会进入onFileFinish
		          //getObjectUrl是为了获取刚刚存储的文件URL
		          cosf.getObjectUrl({
		            Bucket: '存储桶', /* 填入您自己的存储桶，必须字段 */
		            Region: '存储桶所在地',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
		            Key: e.file.name,  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
		            Sign: false
		          }, function (err, data) {
		          	// es为当次文件的构造数据
		            let es = {
		              lastModified: e.file.lastModified,
		              lastModifiedDate: e.file.lastModifiedDate,
		              name: e.file.name,
		              originFileObj: e.file,
		              size: e.file.size,
		              status: data.Url ? "done" : "error", // 设置当前组件的文件上传状态
		              type:  e.file.type,
		              uid: e.file.uid,
		            }
		            that.fileChange(es,true)
		          })
		        },
		      }, function(err, data) {
		        // console.log('function ---->',err || data);
		      });
		}
	}
}
<srcipt>