精华内容
下载资源
问答
  • vue使用webuploader
    千次阅读
    2022-03-29 12:00:39

    vue配合webuploader分片上传
    啥也不说,献上代码
    封装upload.vue:

    <template>
      <div class="upload"></div>
    </template>
    
    <script>
    import WebUploader from ".././../../../static/js/webuploader.min";
    import { httpUrl } from "../../../api/http_url";
    import { v4 as uuidv4 } from "uuid";
    import md5 from "js-md5";
    export default {
      name: "vue-upload",
      props: {
        accept: {
          type: Object,
          default: null
        },
        // 上传地址
        url: {
          type: String,
          default: httpUrl.fenP
        },
        // 上传最大数量 默认为100
        fileNumLimit: {
          type: Number,
          default:1000000
        },
        // 大小限制 默认2M
        fileSingleSizeLimit: {
          type: Number,
          default: 5 * 1024 * 1024
        },
        // 上传时传给后端的参数,一般为token,key等
        formData: {
          type: Object,
          default: {
            // md5:this.uploader.md5File( files )
            md5: null
          }
        },
        // 生成formData中文件的key,下面只是个例子,具体哪种形式和后端商议
        // keyGenerator: {
        //   type: Function,
        //   default(file) {
        //     const currentTime = new Date().getTime();
        //     const md5 = md5(file.name)
        //     return md5;
        //   }
        // },
        multiple: {
          type: Boolean,
          default: true
        },
        // 上传按钮ID
        uploadButton: {
          type: String,
          default: httpUrl.fenP
        },
       
        
      },
      data() {
        return {
          uploader: null,
          md5: null,
          imgAideo:[]
        };
      },
      mounted() {
        this.initWebUpload();
      },
    
      methods: {
    
        initWebUpload() {
          // var md5 = uuidv4();
          // this.formData.md5 = md5;
          // sessionStorage.setItem("md5", md5);
       const _this = this
          this.uploader = WebUploader.create({
            auto: true, // 选完文件后,是否自动上传
            swf: "/static/lib/webuploader/Uploader.swf", // swf文件路径
            server: this.url, // 文件接收服务端
            pick: {
              id: this.uploadButton, // 选择文件的按钮
              multiple: this.multiple, // 是否多文件上传 默认false
              label: ""
            },
            accept: this.getAccept(this.accept), // 允许选择文件格式。
            threads:1,
            fileNumLimit: this.fileNumLimit, // 限制上传个数
            //fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
            formData: this.formData, // 上传所需参数
            chunked: true, //分片上传
            chunkSize: this.fileSingleSizeLimit, //分片大小
            resize : false,  
            duplicate: true // 重复上传
          });
    
          // 当有文件被添加进队列的时候,添加到页面预览
          this.uploader.on("fileQueued", file => {
            this.$emit("fileChange", file);
            
          });
    
          this.uploader.on("uploadStart", file => {
            // 在这里可以准备好formData的数据
            this.uploader.options.formData.md5 = md5(file.name);
          });
    
          // 文件上传过程中创建进度条实时显示。
          this.uploader.on("uploadProgress", (file, percentage) => {
            this.$emit("progress", file, percentage);
          });
    
          this.uploader.on("uploadSuccess", (file, response) => {
            this.$emit("success", file, response);
          });
    
          this.uploader.on("uploadError", (file, reason) => {
            console.error(reason);
            this.$emit("uploadError", file, reason);
          });
    
          this.uploader.on("error", type => {
            let errorMessage = "";
            if (type === "F_EXCEED_SIZE") {
              this.$message.error(
                `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`
              );
            } else if (type === "Q_EXCEED_NUM_LIMIT") {
              this.$message.error("文件上传已达到最大上限数");
            } else {
              this.$message.error(`上传出错!请检查后重新上传!错误代码${type}`);
            }
    
            console.error(errorMessage);
            this.$emit("error", errorMessage);
          });
    
          this.uploader.on("uploadComplete", (file, response) => {
              this.$emit("finshed", file);
          });
    
         
        },
        
    
        upload(file) {
          this.uploader.upload(file);
        },
        stop(file) {
          this.uploader.stop(file);
        },
        cancelFile(file) {
          this.uploader.cancelFile(file);
        },
        removeFile(file, bool) {
          
          this.uploader.removeFile(file, bool);
        },
    
        getAccept(accept) {
          switch (accept) {
            case "video":
              return {
                title: "Videos",
                exteensions: "mp4,mp3,avi",
                mimeTypes: ".mp4,.mp3,.avi"
              };
              break;
            case "image":
              return {
                title: "Images",
                exteensions: "gif,jpg,jpeg,bmp,png,webp,jfif",
                mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.webp,.jfif"
              };
              break;
            default:
              return accept;
          }
        }
      }
    };
    </script>
    
    <style  scoped>
    </style>
    
    
    父组件:
    
    

    import vueUpload from “./upload”;//组件
    import WebUploader from “…/…/…/…/static/js/webuploader.min”;
    mounted() {
    setTimeout(() => {
    document.getElementsByClassName(
    “webuploader-element-invisible”
    )[0].style.display = “none”;
    }, 10);
    },
    computed: {
    uploader() {
    return this.$refs.uploader;
    }
    },

    components: {
    vueUpload,
    uploader() {
    return this.$refs.uploader;
    }
    },

    //调取方法
    fileChange(file) {
    this.fileList.push(file);
    },
    onProgress(file, percent) {
    if (this.imgs.length > 8) {
    this.loading = false;
    } else {
    this.loading = true;
    }
    },
    onSuccess(file, response) {
    this.getImg(file);
    },

    getImg(file) {
      if (this.imgs.length > 8) {
        this.$message.error("最多可上传9张");
        this.loading = false;
      } else {
        var qs = require("qs");
        var a = md5(file.name);
    
        this.$axios
          .post(
            httpUrl.merge,
            qs.stringify({
              md5: a,
              fileName: a + "." + file.ext
            })
          )
          .then(res => {
            this.loading = false;
            if (res.data.code == 1) {
              this.$message.success("上传成功");
              this.imgs.push({
                img: res.data.data,
                id: file
              });
             
            } else {
              this.loading = false;
              this.$message.error(res.data.msg_cn);
            }
          });
    
    
         
      }
    },
    
    fileSize(size) {
      return WebUploader.Base.formatSize(size);
    },
    fileCategory(ext) {
      let type = "";
      const typeMap = {
        image: ["gif", "jpg", "jpeg", "png", "bmp", "webp", "jfif"],
        video: ["mp4", "mp3", "avi"],
        text: []
      };
      Object.keys(typeMap).forEach(_type => {
        const extensions = typeMap[_type];
        if (extensions.indexOf(ext) > -1) {
          type = _type;
        }
      });
      return type;
    },
    
    
    

    官方文档:http://fex.baidu.com/webuploader/document.html
    里面都有方法介绍哦,代码中httpUrl.fenp是后台分片接口哦,httpUrl.merge是后台合并上传哦
    不详细,仅供参考,生活不易,小杨叹气!

    更多相关内容
  • Vue使用WebUploader上传文件/压缩包 npm i webuploader -S 引入 //引入webuploader import WebUploader from "webuploader"; import "webuploader/dist/webuploader.css"; 页面 <el-row class="webUploader">...

    Vue使用WebUploader上传文件/压缩包

    npm i webuploader -S
    

    引入

    //引入webuploader
    import WebUploader from "webuploader";
    import "webuploader/dist/webuploader.css";
    

    页面

    <el-row class="webUploader">
        <el-col :span="24" class="mb20" :style="{ display: 'flex' }">
          <el-button
            class="selectFile"
            :disabled="disabled"
            type="primary"
            size="mini"
            ref="selectFile"
          >
            选择文件
          </el-button>
          <el-button
            @click="submitFile"
            :disabled="disabled"
            type="success"
            size="mini"
            >开始上传</el-button
          >
        </el-col>
        <el-col :span="24">
          <el-table :data="value" :disabled="disabled" size="mini">
            <el-table-column
              label="文件名"
              align="left"
              key="fileName"
              prop="fileName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="大小"
              align="center"
              key="fileSize"
              prop="fileSize"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="进度"
              align="center"
              key="fileProgress"
              prop="fileProgress"
            >
              <template slot-scope="scope">
                <el-progress
                  :text-inside="true"
                  :stroke-width="16"
                  :percentage="scope.row.fileProgress"
                ></el-progress>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              key="fileStatus"
              prop="fileStatus"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-video-play"
                  @click="resume(scope.row.file)"
                  v-hasPermi="['system:user:edit']"
                  :disabled="scope.row.fileStatus === '上传成功'"
                  >开始</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-video-pause"
                  @click="stop(scope.row.file)"
                  :disabled="scope.row.fileStatus === '上传成功'"
                  v-hasPermi="['system:user:remove']"
                  >暂停</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  :disabled="disabled"
                  @click="remove(scope.row, scope.$index)"
                  v-hasPermi="['system:user:resetPwd']"
                  >移除</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-video-camera"
                  @click="imgLook(scope.row.fileId)"
                  :disabled="scope.row.fileStatus !== '上传成功'"
                  v-hasPermi="['system:user:resetPwd']"
                  >预览</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    

    用法

    export default {
      name: "uploaderList",
      components: {},
      props: {
        accept: {
          type: [String, Object],
          default: null
        },
        // 上传地址
        url: {
          type: String,
          default: "url"
        },
        // 上传最大数量 默认为100
        fileNumLimit: {
          type: Number,
          default: 100
        },
        // 大小限制 默认2M
        fileSingleSizeLimit: {
          type: Number,
          default: 5120000
        },
        fileType: {
          type: String,
          default: "knowledge"
        },
        // 上传时传给后端的参数,一般为token,key等
        formData: {
          type: Object,
          default: () => {
            return { guid: null, code: 9 };
          }
        },
        // 生成formData中文件的key,下面只是个例子,具体哪种形式和后端商议
        keyGenerator: {
          type: Function,
          default: () => `${new Date().getTime()}`
        },
        multiple: {
          type: Boolean,
          default: true
        },
        // 上传按钮ID
        uploadButton: {
          type: String,
          default: ""
        },
        value: {
          type: Array,
          default: () => []
        },
        disabled: {
          type: Boolean,
          default: () => false
        }
      },
      data() {
        return {
          uploader: null
        };
      },
      watch: {
        disabled(newVal) {
          if (newVal) {
            this.uploader.destroy();
            return false;
          }
          this.initWebUpload();
        }
      },
      mounted() {
        if (!this.disabled) {
          this.initWebUpload();
        }
      },
      methods: {
        initWebUpload() {
          if (this.uploader) {
            this.uploader.destroy();
          }
          const uploader = (this.uploader = WebUploader.create({
            auto: false, // 选完文件后,是否自动上传
            // swf: '/static/lib/webuploader/Uploader.swf',  // swf文件路径
            server: this.url, // 文件接收服务端
            pick: {
            //pick: { id: "#up_single", multiple: false },
              id: this.$refs.selectFile.$el, // 选择文件的按钮
              multiple: this.multiple // 是否多文件上传 默认false
            },
            accept: this.getAccept(this.accept), // 允许选择文件格式。
            threads: 3,
            fileNumLimit: this.fileNumLimit, // 限制上传个数
            //fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
            formData: this.formData, // 上传所需参数
            chunked: true, //分片上传
            chunkSize: 5120000, //分片大小
            duplicate: true // 重复上传
            //上传文件格式
            //accept: {
             // extensions: "doc,docx,pdf,txt,xls,xlsx,jpg,png,mp4,avi",
            //  mimeTypes: ".doc,.docx,.pdf,.txt,.xls,.xlsx,.jpg,.png,.mp4,.avi",
           // },
             accept: {
              extensions: "zip,rar,ios,7z",
              mimeTypes: ".zip,.rar,.ios,.7z,",
            },
          }));
          const fun = [
            "fileQueued",
            "uploadStart",
            "uploadProgress",
            "uploadSuccess",
            "error"
          ];
          for (const item of fun) {
            uploader.on(item, this[item]);
          }
          return uploader;
        },
        // 当有文件被添加进队列的时候,添加到页面预览
        fileQueued(file) {
          const { name, size, id } = file;
          const obj = {
            id,
            fileName: name,
            fileSize: WebUploader.Base.formatSize(size),
            fileProgress: 0,
            fileStatus: "待上传",
            file
          };
          this.value.push(obj);
        },
        // 在这里可以准备好formData的数据
        uploadStart() {
          this.uploader.options.formData.guid = this.keyGenerator();
        },
        // 文件上传过程中创建进度条实时显示。
        uploadProgress(file, percentage) {
          const fileObj = this.value.find(obj => file.id == obj.id);
          fileObj.fileStatus = "上传中";
          fileObj.fileProgress = parseInt(percentage * 100);
          fileObj.file = file;
        },
        // 文件上传成功
        async uploadSuccess(file, res) {
          const fileObj = this.value.find(obj => file.id == obj.id);
          try {
            const { data } = await combine({
              guid: res.guid,
              fileName: file.name,
              fileType: this.fileType,
              code: res.code
            });
            fileObj.fileId = data.fileId;
            fileObj.fileStatus = "上传成功";
            this.$emit("input", this.value);
          } catch (err) {
            fileObj.fileProgress = 0;
            fileObj.fileStatus = "上传失败,请点击开始重新上传";
          }
        },
        error(type) {//报错信息
          let errorMessage = "";
          if (type === "F_EXCEED_SIZE") {
            errorMessage = `文件大小不能超过${this.fileSingleSizeLimit /
              (1024 * 1000)}M`;
          } else if (type === "Q_EXCEED_NUM_LIMIT") {
            errorMessage = "文件上传已达到最大上限数";
          } else {
            errorMessage = `上传出错!请检查后重新上传!错误代码${type}`;
          }
          console.error(errorMessage);
        },
        // 开始
        resume(file) {
          this.uploader.upload(file);
        },
        // 暂停
        stop(file) {
          file.fileStatus = "暂停中";
          this.uploader.stop(file);
        },
        // 移除
        async remove(row, idx) {
          const { fileId, file } = row;
          try {
            if (fileId) await delFileApi(fileId);
            this.value.splice(idx, 1);
            if (file) {
              // 取消并中断文件上传
              this.uploader.cancelFile(file);
              // 在队列中移除文件
              this.uploader.removeFile(file, true);
            }
            this.$emit("input", this.value);
          } catch (error) {}
        },
        // 预览
        imgLook(fileId) {
          if (!fileId) {
            return false;
          }
          lookImg(fileId).then(res => {
            const sourceImages = [];
            sourceImages.push({
              thumbnail:
                process.env.VUE_APP_BASE_API +
                this.profile +
                res.data.thumbnailFile,
              source:
                process.env.VUE_APP_BASE_API + this.profile + res.data.thumbnailFile
            });
            // console.log(sourceImages);
            this.$refs.viewer.show(sourceImages, 0);
          });
        },
          //上传文件格式
        getAccept(accept) {
          switch (accept) {
            case "text":
              return {
                title: "Texts",
                exteensions: "doc,docx,xls,xlsx,ppt,pptx,pdf,txt",
                mimeTypes: ".doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"
              };
            case "video":
              return {
                title: "Videos",
                exteensions: "mp4",
                mimeTypes: ".mp4"
              };
            case "image":
              return {
                title: "Images",
                exteensions: "gif,jpg,jpeg,bmp,png,tif",
                mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.tif"
              };
            default:
              return accept;
          }
        },
        submitFile() {
          this.uploader.upload();
        }
      }
    };
    

    引入组件

    //引入
    import UploaderList from "@/components/upload/uploadList.vue";
    components: { UploaderList },
    //使用
     <UploaderList
        v-model="imageList"
        :formData="{ guid: null, fileCategory: 1, code: 7 }"
        :fileType="'targetFacility'"
    />
    
    展开全文
  • WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 。这篇文章主要介绍了在Vue项目中使用WebUploader实现文件上传,需要的朋友可以参考下
  • 基于Vue+webuploader+element-ui的文件分片上传, 插件使用 npm i w-web-uploader --save 组件内使用 <VueWebUpload checkUrl="/storage/fdfs/checkFile" uploadUrl="/storage/fdfs/batchPeaceUpload" tip=...
  • 1.下载webuploader 下载地址:官网http://fex.baidu.com/webuploader/ 2.引入webuploader ...这里我们使用完全压缩版的webuploader.min.js,同时还要引入Uploader.swf 、 webuploader.css,所以可以删除...

    1.下载webuploader

    下载地址:官网http://fex.baidu.com/webuploader/
    在这里插入图片描述

    2.引入webuploader

    使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。
    方法1.直接引入文件
    这里我们使用完全压缩版的webuploader.min.js,同时还要引入Uploader.swf 、 webuploader.css,所以可以删除其他版本的文件,只留这三个文件,将解压的webuploader文件夹直接放在static文件夹下.

    在index.html中引入webuploader.min.js

    <script src="./static/webuploader-0.1.5/webuploader.min.js"></script>
    
    

    在这里插入图片描述
    重启项目后报错了,说缺少依赖jquery,打开源码webuploader.js看一下
    在这里插入图片描述
    原来webuploader是依赖于juqery或者Zepto的,那我们引入jquery,我们去jquery官网下载jquery,并在index.html中引入,注意,一定要在webuploader.min.js之前引入,在这里我下载的是1.12.4版本

    <script src="./static/webuploader-0.1.5/jQuery1.12.4.js"></script>
    

    方法2:模块化引入
    下载webuploder

    npm install webuploader --save
    

    下载jquery

    npm install jquery@1.12.4
    

    在App.vue中引入webuploder和jquery

    import $ from 'jquery'
    import WebUploader from 'webuploader'
    

    3.实例

    upload.vue

    <template>
        <div id="uploader" class="wu-example">
          <!--用来存放文件信息-->
          <div id="fileLilst" class="uploader-list"></div>
              <div class="btns">
                <!-- 选择文件的按钮 -->
                  <div id="picker">选择文件</div>
                <!-- 开始上传按钮 -->
                  <button id="uploadBtn" class="btn btn-default">开始上传</button>
          </div>
        </div>
    </template>
    <script>
    import $ from 'jquery'
    import WebUploader from 'webuploader'
    var fileMd5;
    //自定义参数 文件名
    var fileName, uploader;
    export default {
        name: 'upload',
    	mounted() {
    		this.getAllFileList()
          this.uploadPlan = `上传完成(${this.fileNum} / ${this.completeNum}`
    
          //监听分块上传过程中的三个时间点  
          WebUploader.Uploader.register({
            "before-send-file": "beforeSendFile",  //整个文件上传前调用
            "before-send": "beforeSend",  //每个分片上传前
            "after-send-file": "afterSendFile",  //分片上传完毕
          }, {
            //时间点1:所有分块进行上传之前调用此函数  
            beforeSendFile: function (file) {
              //console.log("beforeSendFile");
              var deferred = WebUploader.Deferred();
              //1、计算文件的唯一标记,用于断点续传  
              (new WebUploader.Uploader()).md5File(file, 0, 2 * 1024 * 1024)
                .progress(function (percentage) {
                  $('#item1').find("p.state").text("正在读取文件信息...");
                })
                .then(function (val) {
                  fileMd5 = val;
                  $('#item1').find("p.state").text("成功获取文件信息...");
                  //获取文件信息后进入下一步  
                  deferred.resolve();
                });
              return deferred.promise();
            },
            //时间点2:如果有分块上传,则每个分块上传之前调用此函数  
            beforeSend: function (block) {
              console.log("beforeSend111111");
              console.log(block.chunk);
              var deferred = WebUploader.Deferred();
              $.ajax({
                type: "POST",
                url: "http://58.251.218.38:8080/BIMService2/model/checkOrMerge?action=checkChunk",
                data: {
                  //文件唯一标记  
                  fileMd5: fileMd5,
                  //当前分块下标  
                  //chunk:block.chblocknk, 
                  chunk: block.chunk,
                  //当前分块大小  
                  chunkSize: block.end - block.start,
                  userId: localStorage.getItem("userId")
                },
                dataType: "json",
                success: function (response) {
                  if (eval('(' + response.ifExist + ')')) {
                    //console.log("分片存在:" + block.chunk)
                    //分块存在,跳过  
                    deferred.reject();
                  } else {
                    //console.log("分片不存在:" + block.chunk)
                    //分块不存在或不完整,重新发送该分块内容  
                    deferred.resolve();
                  }
                }
              });
              this.owner.options.formData.fileMd5 = fileMd5;
              console.log("继续执行")
              //deferred.resolve();  
              return deferred.promise();
            },
            //时间点3:所有分块上传成功后调用此函数  
            afterSendFile: function (file) {
              //console.log("afterSendFile");
              fileName = file.name; //为自定义参数文件名赋值
              //如果分块上传成功,则通知后台合并分块  
              $.ajax({
                type: "POST",
                url: "http://58.251.218.38:8080/BIMService2/model/checkOrMerge?action=mergeChunks",
                data: {
                  fileMd5: fileMd5,
                  fileName: fileName,
                  ext: file.ext, //文件扩展名
                  projectName: $("#project option:selected").text(), //项目名称
                  userId: localStorage.getItem("userId")
                },
                success: function (response) {
                  console.log(response)
                  //alert("上传成功");   
                }
              });
            }
          });
          uploader = WebUploader.create({
            swf: 'static/webuploader/Uploader.swf', // swf文件路径
            formData: { projectName: "", userId: localStorage.getItem("userId") },
            server: 'http://58.251.218.38:8080/BIMService2/model/upload', // 文件接收服务端。
            pick: '#picker', // 选择文件的按钮。可选
            chunked: true, //是否要分片处理大文件上传
            chunkSize: 2 * 1024 * 1024, //分片上传,每片5M,默认是5M
            auto: true, //选择文件后是否自动上传
            chunkRetry: 2, //如果某个分片由于网络问题出错,允许自动重传次数
            //runtimeOrder: 'html5,flash',
            // 在上传当前文件时,准备好下一个文件
            prepareNextFile: false,
            threads: 1, //threads {Boolean} [可选] [默认值:3] 上传并发数。允许同时最大上传进程数。
            duplicate: false,//是否重复上传(同时选择多个一样的文件),true可以重复上传  
            /* accept: {
              title: '语音上传',
              extensions: 'wav,zip,rar',
              mimeTypes: 'audio/x-wav,.zip,.rar'
            } */
          });
          this.initWebUpload()
    	},
    	methods: {
    		initWebUpload() {
    		//当文件被加入队列之前触发
                uploader.on('beforeFileQueued', (file, data) => {
                   //console.log('beforeFileQueued')
                        $.ajax({  
                            type:"POST",  
                            url:"http://58.251.218.38:8080/BIMService2/model/permissionVerification",  
                            data:{  
                                userId: localStorage.getItem("userId")
                            },  
                            dataType:"json",  
                            success (response){  
                                let msg = response.message
                                if (msg === '请先登录账号') {
                                    this.$message.error(msg);
                                    this.$router.push({path: '/Login'});
                                    return false;
                                } else if (msg === '您没有使用权限,请先联系管理员获取使用权限') {
                                    this.$message.error(msg);
                                }
                            }
                        }); 
                });
                // 当有文件被添加进队列的时候
                uploader.on('fileQueued', (file) => {
                    //console.log('fileQueued')
                    this.filesList.push({
                        id: file.id,
                        name: file.name,
                        size: this.reducedUnit(file.size),
                        percentage: 0
                    })
                    this.fileNum = this.filesList.length
                });
                //绑定uploadBeforeSend事件来给每个独立的文件添加参数
                uploader.on('uploadBeforeSend', (block, data) => {
                    //设置data参数
                    //data.projectName = $("#project").find("option:selected").text();   // 将存在file对象中的md5数据携带发送过去。
                }, 2);
                // 文件上传过程中创建进度条实时显示。
                uploader.on('uploadProgress', (file, percentage) => {
                    //console.log('uploadProgress')
                    this.filesList.forEach(item=>{
                        if(file.id===item.id) {
                            item.percentage = (percentage.toFixed(2))*100+"%"
                        }
                    })
                });
                // 文件上传成功
                uploader.on( 'uploadSuccess', (file, response)=> {
                    //console.log('uploadSuccess')
                    //console.log(response._raw); //这里可以得到后台返回的数据
                    this.filesList.forEach(item=>{
                        if(file.id===item.id) {
                            item.percentage = '上传成功'
                        }
                    })
                    this.completeNum++
                    this.getAllFileList()
                });
    
                // 文件上传失败,显示上传出错
                uploader.on('uploadError', (file, ret) => {
                    //console.log('上传失败')
                    this.filesList.forEach(item=>{
                        if(file.id===item.id) {
                            item.percentage = '上传失败'
                            }
                        })
                });
                // 完成上传完
                uploader.on('uploadComplete', (file) => {
                    $('#' + file.id).find('.progress').fadeOut();
                });
            },
            //暂停上传
            pauseUpload () {
                uploader.cancelFile(uploader.getFiles()[0].id);
            },
            //取消上传
            removeFile (index, row) {
                //this.filesList.splice(this.filesList.indexOf(row.name), 1);
                this.filesList.splice(index, 1)
            },
        }
    }
    

    4.遇到的问题

    1)WebUploader 插件的上传按钮点击无效,按F12 之后才有反应
    问题:上传按钮无效,debug的时候发现(上传id元素下面插件的渲染的宽度:1px,高度:1px),下面是错误图例说明:
    在这里插入图片描述
    解决方案:
    在页面加一段样式:

    <style>  
        #picker div:nth-child(2){width:100%!important;height:100%!important;}  
    </style> 
    

    如果上传按钮用的不是div 标签,改为div 标签,如<span id="picker">选择图片,改为<div id="picker">选择图片。

    如果做了第一步但用的是span 标签的话,只有鼠标在文字下方的按钮区域才有效(有效时,鼠标移上去按钮颜色会变深,无效时按钮没反应),按F12之后,只有鼠标在文字上方的按钮区域点击才有效;

    用div 的话就没这个问题,整个按钮都正常。
    2)修改按钮样式

    <style>
    .webuploader-container {
       position: relative;
    }
    .webuploader-element-invisible {
       position: absolute !important;
       clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px,1px,1px,1px);
    }
    .webuploader-pick {
       position: relative;
       display: inline-block;
       cursor: pointer;
       background: #3376ff;
       padding: 8px 12px;
       color: #fff;
       font-size: 14px;
       text-align: center;
       border-radius: 3px;
       overflow: hidden;
    }
    .webuploader-pick-hover {
       background: #065ffc;
    }
    </style>
    

    参考网址:
    https://blog.csdn.net/Easy_____/article/details/78250736
    https://www.cnblogs.com/ocean-sky/p/7575980.html

    展开全文
  • vue中大文件上传webuploader前端用法

    千次阅读 2021-11-16 14:35:22
    vue中大文件上传webuploader前端用法 首先呢需要安装webuploader; 命令: npm i webuploader -S 下载完成以后在vue文件中引入 //引入webuploader import WebUploader from "webuploader"; import "webuploader/dist...

    vue中大文件上传webuploader前端用法

    首先呢需要安装webuploader;

    命令:

    npm i webuploader -S
    

    下载完成以后在vue文件中引入

    //引入webuploader
    import WebUploader from "webuploader";
    import "webuploader/dist/webuploader.css";
    

    然后页面中需要有上传按钮和上传列表以及上传进度条的东西,首先写好dom页面中

    <el-row class="webUploader">
        <el-col :span="24" class="mb20" :style="{ display: 'flex' }">
          <el-button
            class="selectFile"
            :disabled="disabled"
            type="primary"
            size="mini"
            ref="selectFile"
          >
            选择文件
          </el-button>
          <el-button
            @click="submitFile"
            :disabled="disabled"
            type="success"
            size="mini"
            >开始上传</el-button
          >
        </el-col>
        <el-col :span="24">
          <el-table :data="value" :disabled="disabled" size="mini">
            <el-table-column
              label="文件名"
              align="left"
              key="fileName"
              prop="fileName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="大小"
              align="center"
              key="fileSize"
              prop="fileSize"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="进度"
              align="center"
              key="fileProgress"
              prop="fileProgress"
            >
              <template slot-scope="scope">
                <el-progress
                  :text-inside="true"
                  :stroke-width="16"
                  :percentage="scope.row.fileProgress"
                ></el-progress>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              key="fileStatus"
              prop="fileStatus"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-video-play"
                  @click="resume(scope.row.file)"
                  v-hasPermi="['system:user:edit']"
                  :disabled="scope.row.fileStatus === '上传成功'"
                  >开始</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-video-pause"
                  @click="stop(scope.row.file)"
                  :disabled="scope.row.fileStatus === '上传成功'"
                  v-hasPermi="['system:user:remove']"
                  >暂停</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  :disabled="disabled"
                  @click="remove(scope.row, scope.$index)"
                  v-hasPermi="['system:user:resetPwd']"
                  >移除</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-video-camera"
                  @click="imgLook(scope.row.fileId)"
                  :disabled="scope.row.fileStatus !== '上传成功'"
                  v-hasPermi="['system:user:resetPwd']"
                  >预览</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    

    接下来是上传方法的使用,在vue中使用封装,源码如下

    export default {
      name: "uploaderList",
      components: {},
      props: {
        accept: {
          type: [String, Object],
          default: null
        },
        // 上传地址
        url: {
          type: String,
          default: "url"
        },
        // 上传最大数量 默认为100
        fileNumLimit: {
          type: Number,
          default: 100
        },
        // 大小限制 默认2M
        fileSingleSizeLimit: {
          type: Number,
          default: 5120000
        },
        fileType: {
          type: String,
          default: "knowledge"
        },
        // 上传时传给后端的参数,一般为token,key等
        formData: {
          type: Object,
          default: () => {
            return { guid: null, code: 9 };
          }
        },
        // 生成formData中文件的key,下面只是个例子,具体哪种形式和后端商议
        keyGenerator: {
          type: Function,
          default: () => `${new Date().getTime()}`
        },
        multiple: {
          type: Boolean,
          default: true
        },
        // 上传按钮ID
        uploadButton: {
          type: String,
          default: ""
        },
        value: {
          type: Array,
          default: () => []
        },
        disabled: {
          type: Boolean,
          default: () => false
        }
      },
      data() {
        return {
          uploader: null
        };
      },
      watch: {
        disabled(newVal) {
          if (newVal) {
            this.uploader.destroy();
            return false;
          }
          this.initWebUpload();
        }
      },
      mounted() {
        if (!this.disabled) {
          this.initWebUpload();
        }
      },
      methods: {
        initWebUpload() {
          if (this.uploader) {
            this.uploader.destroy();
          }
          const uploader = (this.uploader = WebUploader.create({
            auto: false, // 选完文件后,是否自动上传
            // swf: '/static/lib/webuploader/Uploader.swf',  // swf文件路径
            server: this.url, // 文件接收服务端
            pick: {
              id: this.$refs.selectFile.$el, // 选择文件的按钮
              multiple: this.multiple // 是否多文件上传 默认false
            },
            accept: this.getAccept(this.accept), // 允许选择文件格式。
            threads: 3,
            fileNumLimit: this.fileNumLimit, // 限制上传个数
            //fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
            formData: this.formData, // 上传所需参数
            chunked: true, //分片上传
            chunkSize: 5120000, //分片大小
            duplicate: true // 重复上传
          }));
          const fun = [
            "fileQueued",
            "uploadStart",
            "uploadProgress",
            "uploadSuccess",
            "error"
          ];
          for (const item of fun) {
            uploader.on(item, this[item]);
          }
          return uploader;
        },
        // 当有文件被添加进队列的时候,添加到页面预览
        fileQueued(file) {
          const { name, size, id } = file;
          const obj = {
            id,
            fileName: name,
            fileSize: WebUploader.Base.formatSize(size),
            fileProgress: 0,
            fileStatus: "待上传",
            file
          };
          this.value.push(obj);
        },
        // 在这里可以准备好formData的数据
        uploadStart() {
          this.uploader.options.formData.guid = this.keyGenerator();
        },
        // 文件上传过程中创建进度条实时显示。
        uploadProgress(file, percentage) {
          const fileObj = this.value.find(obj => file.id == obj.id);
          fileObj.fileStatus = "上传中";
          fileObj.fileProgress = parseInt(percentage * 100);
          fileObj.file = file;
        },
        // 文件上传成功
        async uploadSuccess(file, res) {
          const fileObj = this.value.find(obj => file.id == obj.id);
          try {
            const { data } = await combine({
              guid: res.guid,
              fileName: file.name,
              fileType: this.fileType,
              code: res.code
            });
            fileObj.fileId = data.fileId;
            fileObj.fileStatus = "上传成功";
            this.$emit("input", this.value);
          } catch (err) {
            fileObj.fileProgress = 0;
            fileObj.fileStatus = "上传失败,请点击开始重新上传";
          }
        },
        error(type) {//报错信息
          let errorMessage = "";
          if (type === "F_EXCEED_SIZE") {
            errorMessage = `文件大小不能超过${this.fileSingleSizeLimit /
              (1024 * 1000)}M`;
          } else if (type === "Q_EXCEED_NUM_LIMIT") {
            errorMessage = "文件上传已达到最大上限数";
          } else {
            errorMessage = `上传出错!请检查后重新上传!错误代码${type}`;
          }
          console.error(errorMessage);
        },
        // 开始
        resume(file) {
          this.uploader.upload(file);
        },
        // 暂停
        stop(file) {
          file.fileStatus = "暂停中";
          this.uploader.stop(file);
        },
        // 移除
        async remove(row, idx) {
          const { fileId, file } = row;
          try {
            if (fileId) await delFileApi(fileId);
            this.value.splice(idx, 1);
            if (file) {
              // 取消并中断文件上传
              this.uploader.cancelFile(file);
              // 在队列中移除文件
              this.uploader.removeFile(file, true);
            }
            this.$emit("input", this.value);
          } catch (error) {}
        },
        // 预览
        imgLook(fileId) {
          if (!fileId) {
            return false;
          }
          lookImg(fileId).then(res => {
            const sourceImages = [];
            sourceImages.push({
              thumbnail:
                process.env.VUE_APP_BASE_API +
                this.profile +
                res.data.thumbnailFile,
              source:
                process.env.VUE_APP_BASE_API + this.profile + res.data.thumbnailFile
            });
            // console.log(sourceImages);
            this.$refs.viewer.show(sourceImages, 0);
          });
        },
          //上传文件格式
        getAccept(accept) {
          switch (accept) {
            case "text":
              return {
                title: "Texts",
                exteensions: "doc,docx,xls,xlsx,ppt,pptx,pdf,txt",
                mimeTypes: ".doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"
              };
            case "video":
              return {
                title: "Videos",
                exteensions: "mp4",
                mimeTypes: ".mp4"
              };
            case "image":
              return {
                title: "Images",
                exteensions: "gif,jpg,jpeg,bmp,png,tif",
                mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.tif"
              };
            default:
              return accept;
          }
        },
        submitFile() {
          this.uploader.upload();
        }
      }
    };
    

    封装完毕,在想用的地方使用

    //引入
    import UploaderList from "@/components/upload/uploadList.vue";
    components: { UploaderList },
    //使用
     <UploaderList
        v-model="imageList"
        :formData="{ guid: null, fileCategory: 1, code: 7 }"
        :fileType="'targetFacility'"
    />
    

    在这里插入图片描述

    展开全文
  • 简介:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,...
  • 大文件上传vue+WebUploader

    千次阅读 2020-09-27 16:02:09
    大文件上传vue+WebUploader 说说我实习前端开发的时候用的大文件上传,前端原本项目用的是element自带的el-upload文件上传,确实很方便,element把数据上传成功,失败,上传中等等的监听事件都已经封装好了,文件...
  • 非常不错,具有参考借鉴价值,需要的朋友可以参考下Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽。...
  • Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽。 上传就上传吧,为什么搞得那么麻烦,用分片上传? 分片与...
  • 首先说一下vue使用webuploader该如何引入调用  1. 肯定是安装操作, 本人用的是淘宝镜像 cnpm i webuploader -S 如果你没有安装淘宝镜像,则使用 npm i webuploader -S  2. 引入操作,在具体的vue组件中引入 ,...
  • 上传文件时,如果使用普通上传,则需要上传一个文件完成后才能上传下一个文件,如果文件很大时,可能会造成浏览器无响应,如果采用分片上传方式,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。...
  • 本篇文章主要介绍了vue webuploader 文件上传组件开发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue结合webuploader实现文件分片断点续传

    千次阅读 热门讨论 2019-12-09 11:15:10
    1,本项目基于vue-cli3,在public下创建webUploader目录 2,由于我司视频兼容能力业务需求,jQuery在index.html中引入。因此jQuery的引入方式有些简陋,多多包涵。。 3,文件分片断点续传底层能力组件 <...
  • VueWebuploader.zip

    2021-09-08 19:09:04
    public.scss,globa-class.scss,components,VueWebuploader,index.vue,README.md,VueWebuploader.vue,App.vue,assets,fonts,iconfont.svg,iconfont.woff,iconfont.js,iconfont.eot,iconfont.ttf,iconfont.css,api,...
  • springboot+webuploader 实现大文件切片上传,兼容IE8+,chrome等浏览器,可运行
  • vue WebUploader 分片上传

    2020-05-29 09:26:30
    在服务端保存数据 用户在使用上传的时候可能有各种你意想不到的操作,这里我发挥想象描述一下用户可能的行为: 同一台机器使用不同帐号登录,上传同一个文件 文件上传了一部分,然后修改了文件内容,再次上传 文件...
  • 1、vue框架,package.json文件,dependencies依赖 "webuploader": "^0.1.8" 2、引用与注册 import WebUploader from 'webuploader' components: { WebUploader }, 3、页面渲染 <div id="uploader" ...
  • ue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽。 上传就上传吧,为什么搞得那么麻烦,用分片上传? 分片...
  • Vue中将使用WebUploader实现的上传功能封装成一个单独的上传组件,但是在多个页面使用上传组件的时候,在页面之前跳转(非刷新)会导致多次注册WebUploader,最终出现一次上传触发多个上传操作。 解决方法: 在...
  • <template> <div> <el-dialog title="导入数据" :visible.sync="drVisible" width="350px" :modal-append-to-body="false" > <el-upload class="avatar-uploader" :action="impo
  • 文件列表搜索type="primary"size="mini"icon="el-icon-plus"class="handle-del mr10"@click="addAllSelection">上传文件type="danger"size="mini"icon="el-icon-delete"class="handle-del mr10"@click=...
  • webUploader在被vue进行router之后进行多次register。 多次进入到register页面时,出现多个uploader实例进行文件上传,一次调用多次上传。 目前解决,注册uploader时进行卸载。
  • vue WebUploader 分块上传

    2020-06-01 13:58:32
    由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,在项目使用的jslib项目中找到了BJUI框架集成jQuery Uploadify的部分,这部分代码封装在bjui-all.js...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 982
精华内容 392
关键字:

vue使用webuploader