element upload http-request 设置上传进度

最新推荐文章于 2024-07-09 16:54:40 发布

by_w

最新推荐文章于 2024-07-09 16:54:40 发布

阅读量935

点赞数

分类专栏： vue upload element 文章标签： vue.js javascript upload

本文链接：https://blog.csdn.net/weixin_50668000/article/details/115124190

版权

vue 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

upload

1 篇文章 0 订阅

订阅专栏

element

1 篇文章 0 订阅

订阅专栏

elementUI 上传组件很方便我们上传个种类型的文件，但是一般我们的请求都是自己配置的，通过 action="url"传入上传地址就感觉不太喜欢

这时候我们就可以使用 http-request 属性来覆盖默认的上传行为（即action=“url”），自定义上传的实现

HTML代码

 	<el-upload show-file-list action="#" class="avatar-uploader el-upload" :http- request="handleChange">
            <el-button size="small" type="primary">点击上传</el-button>
     </el-upload>
    <el-progress v-if="show" :percentage="percentage"></el-progress>

JS 部分

 handleChange(file) {
      console.log(file);
      this.show = true;
      getQiNiuUploadToken({}).then((res) => {
        let fd = new FormData();
        let fileName = file.file.name + new Date().getTime();
        fd.append("file", file.file);
        fd.append("token", res.data.token);
        fd.append("key", fileName);
        this.axios
          .post("http://upload.qiniup.com/", fd, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
            onUploadProgress: (progressEvent) => {
            // onUploadProgress 文件上传时的函数   上传进度
              this.percentage = Number(
                ((progressEvent.loaded / progressEvent.total) * 100).toFixed(0)
              );
            },
          })
          .then((res1) => {
            this.address = res.data.domain + fileName;
            this.$message.success("上传成功");
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },