element-upload+Vue腾讯云COS上传文件

依赖相关

通过npm i cos-js-sdk-v5 --save安装 SDK 依赖

// 导入 cos 模块，挂载到Vue上，后续调用

const COS = require('cos-js-sdk-v5')
var cos = new COS({
  SecretId: '',//查看cos文档获取
  SecretKey: ''//查看cos文档获取
})
Vue.prototype.$COS =cos;

自定义请求函数

httpRequestFn(res) {
      console.log(res);
      //对象需要提前创建
      this.$COS.putObject(
        {
          //利用在mian中的zzk存储桶,请不要不要攻击zzk的存储服务器
          Bucket: "存储桶" /* 必须:存储桶 */,
          Region: "ap-guangzhou" /* 存储桶所在地域，必须字段 */,
          Key: "image/" + res.file.name /* 必须 :目录/文件名 */,
          StorageClass: "STANDARD", // 上传模式
          Body: res.file, // 上传文件对象
          onProgress: function (progressData) {
            // 进度条
            console.log(JSON.stringify(progressData));
          },
        },
        (err, data) => {
          // 注意用箭头函数,否则会出现this的指向问题
          console.log(err || data);
          if (data) {
            // 上传成功
            this.tmForm.logoUrl = `http://${data.Location}`;
          }
        }
      );
    },

配置element-upload，http-request属性 覆盖默认的上传行为，可以自定义上传的实现,使用自定义请求函数httpRequestFn，action=“#”
具体查看element上传组件API
https://element.eleme.cn/#/zh-CN/component/upload

<el-upload
            class="avatar-uploader"
            action="#"
            :http-request="httpRequestFn"
            :show-file-list="false"
          >
            <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateTradeMark"
          >确 定</el-button
        >
      </div>
    </el-dialog>

不懂的地方可以联系博主