美文网首页
Element 多文件手动上传到腾讯云

Element 多文件手动上传到腾讯云

作者: 董懂同学 | 来源:发表于2018-08-21 09:29 被阅读8次
    <template>
        <div class="hello">
            <el-upload
                    ref="upload"
                    multiple
                    :http-request="handleUpload"
                    :on-remove="handleRemove"
                    :on-exceed="handleExceed"
                    :limit="10"
                    :show-file-list="true"
                    :file-list="fileList">
                <el-button
                        type="success"
                        icon="el-icon-upload"
                        size="mini">添加附件
                </el-button>
            </el-upload>
        </div>
    </template>
    
    <script>
    // 这里要引入COS 和 你们团队使用的Ajax库
      export default {
        name: 'hello',
        data() {
          return {
            fileList: [],
            cos:null
          }
        },
        methods: {
          handleRemove(file, fileList) {
            this.researchForm.fileList = fileList;
            console.log(this.researchForm.fileList);
          },
          handleExceed() {
            this.$message.warning({
              message: '不能超过10个附件'
            })
          },
          handleUpload(param) {
            const self = this;
            let file = param.file;
            if (!file) return;
            let originName = file.name;
            let originSize = file.size;
            let originType = file.type;
            uAxios.get('/api/qcloud/secret').then(res => {
              let result = res.data.data;
              self.cos = new COS({
                getAuthorization: function (options, callback) {
                  callback({
                    TmpSecretId: result.tmp_secret_id,
                    TmpSecretKey: result.tmp_secret_key,
                    XCosSecurityToken: result.xcos_security_token,
                    ExpiredTime: result.expired_time,
                  });
                }
              });
              let bucket = result.bucket;
              let region = result.region;
              let upload_dir = result.dir;
              self.cos.putObject({
                Bucket: bucket,
                Region: region,
                Key: result.dir + file.name,
                Body: file
              }, function (err, data) {
                console.log(err || data);
                if (err) {
                  self.$message.error({
                    message: err.error
                  });
                } else {
                  let file_path = 'https://' + bucket + '.cos.' + region + '.myqcloud.com/' + upload_dir + file.name;
                  console.log('文件上传成功 ' + file_path);// 得到的file_path 就是上传到腾讯云的路径,将这个URL传给后端即可
                }
              });
            });
          },
        }
      }
    </script>
    

    相关文章

      网友评论

          本文标题:Element 多文件手动上传到腾讯云

          本文链接:https://www.haomeiwen.com/subject/vxkdiftx.html