vue实现大文件上传

最新推荐文章于 2024-06-06 14:35:00 发布

Tan-玛卡巴卡

最新推荐文章于 2024-06-06 14:35:00 发布

阅读量256

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_60172238/article/details/136349764

版权

本文介绍了如何通过npm或yarn下载并全局引入vue-simple-uploader组件，以及如何将其封装成Vue页面中的文件上传组件jmis-big-upload，包括HTML结构、事件处理和数据回显的示例。

摘要由CSDN通过智能技术生成

1、下载依赖

用npm 下载
npm i "vue-simple-uploader"

或者用yarn下载
yarn "vue-simple-uploader"

当前版本号：^0.7.6

2、全局引入

main.js中引入

import uploader from 'vue-simple-uploader';

app.use(uploader);

3、封装成组件

因为源码过长，所以在上面代码资源包中查看源码和样式

4、vue页面用法

// html源码  
<el-col :span="24">
              <el-form-item label="文件上传" prop="path">
                <jmis-big-upload :disabled="mode === 'show'" tableName="pmRegisterArtproblem" :fileslist="sourcefileList2"
                  @upload="changeUploadBigFile"></jmis-big-upload>
              </el-form-item>
            </el-col>

// 引入当前页面
import jmisBigUpload from "@/components/jmisBigUpload";
  components: {
    jmisBigUpload
  },

    // 文件上传
    changeUploadBigFile(e) {
      this.sourcefileList = e;
    },

    //表单回显数据
    setData(data) {
      this.form = Object.assign({}, data);
      // 其他字段-查看和编辑的回显
      this.$API.model.common.getFilesName(data.path).then((res) => {
        res.data.forEach((res) => {
          (res.name = res.filesName), (res.url = res.downloadPath);
          res.response = {
            data: res.downloadPath,
          };
        });
        this.sourcefileList2 = res.data.map((item) => {
          item.flag = true;
          return item;
        });
      });
    },