vue+element+oss 上传图片到阿里云

使用npm安装SDK的开发包：

npm install ali-oss --save

el-upload组件做些修改

添加:http-request=" "属性，它会覆盖默认的上传行为:action="“，可以实现自定义上传。
 <el-upload
	:disabled="isShowXiang && role_id != '1'"
 	:multiple="true"
	:action="UploadUrl()"
	:http-request="fnUploadRequest01"
	list-type="picture-card"
	:file-list="listArr01"
	:data="upLoadData"
	:on-preview="handlePictureCardPreview01"
	:on-success="handleAvatarSuccess01"
	:on-remove="handleRemove01">
	<i class="el-icon-plus"></i>
</el-upload>

向后台请求上传图片到oss需要用到的参数

ossimg(files){
    var that = this;
    that.$http.post('baseurl', qs.stringify({
        token: localStorage.getItem('token'),
    })).then(function(res) {
        if(res.data.code == '0'){
            var resda = res.data.data;
            var ossData = new FormData()
            ossData.append('name', files.file.name)
            //key就代表文件层级和阿里云上的文件名
            let filename = files.file.name
            //上传图片从新命名，防止图片名重复
            let picName = that.random_string(32) + that.get_suffix(filename)
            let keyValue = resda.dir + "" + picName
            ossData.append('key', keyValue)
            ossData.append('policy', resda.policy)
            ossData.append('OSSAccessKeyId', resda.accessid)
            ossData.append('success_action_status', 200)
            ossData.append('signature', resda.signature)
            //后台会有回调地址，也是后台提供的
            ossData.append('callback', resda.callback)
            ossData.append('file', files.file)
            
            //这里是向阿里云请求图片上传，resda.host为阿里云的接口地址（由后台提供）
            that.axios.post(resda.host, ossData, {  
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'x-oss-object-acl': 'public-read'
                }
            }).then(res => {
                console.log(res)
                //做数据处理
                //有一点要注意的， el-upload中:file-list属性在这边要赋值，如果你用的是默认的预览图片，当你删除的时候会出现问题
                if (res.data.code == '0') {
                    var imgid = res.data.data.file_id;
                    var imgarr = {
                        url: res.data.data.file_src,
                        id: res.data.data.file_id
                    }
                    that.listArrs01.push(imgid)
                    that.listArr01.push(imgarr);
                }
            }).catch(error => {

            })
        }else{
            that.$message({
                message: res.data.msg,
                type: 'warning'
            });
        }
    }).catch(err => {

    });
},
//命名图片名称所使用到的函数
get_suffix(filename) {
  let pos = filename.lastIndexOf('.')
  let suffix = ''
  if (pos != -1) {
    suffix = filename.substring(pos)
  }
  return suffix
},
random_string(len) {
  len = len || 32
  var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  var maxPos = chars.length
  var pwd = ''
  for (let i = 0; i < len; i++) {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return pwd
},

最后是调用

fnUploadRequest01(file) {
    var that = this
    that.ossimg(file);
},
//多个地方调用的话在ossimg('1',file)中使用多个参数区分

去除上传图片时动画过渡

在css中添加.el-upload-list__item {transition: none !important;}

*本人学习记录，仅供参考，如有不对指出请及时指出，谢谢。