在vue里面实现webupload参数动态传递

本文介绍如何使用WebUploader库实现文件的分片上传功能。通过详细解析代码,展示了如何配置上传选项,包括服务器地址、文件大小限制、自定义上传按钮等,并实现了文件上传进度、成功、错误的监听。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、html

<template>
  <div>
    <div id="upload" ref="button"></div>
  </div>
</template>

二、js

<script>
  import $ from 'jquery';
  import WebUploader from 'webuploader';
  import uploaderSwf from 'webuploader/dist/Uploader.swf';

  export default {
    name: 'PrivatizationUpload',
    data() {
      return {
        chunked: false,
        attachments: {},
        threads: 1,
        fileKey: null
      };
    },
    computed: {
      btnId() {
        return Utils.uuid();
      },
      options() {
        return {
          server: 'http://www.baidu.com',
          chunked: false,
          swf: uploaderSwf,
          pick: {
            id: '#upload',
            multiple: false
          },
          auto: true,
          fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
        };
      }
    },
    methods: {
      },
    created() {
    },
    mounted() {
      let $this = this;
      WebUploader.Uploader.register({
      	name:'file-store-token',
        'before-send-file': 'beforeSendFile' //文件发送之前的监听函数
      }, {
        beforeSendFile: function(file) {
          let me = this;
          let d = WebUploader.Deferred();
		  let formData = { id:111,name:222 };
         	$this.uploader.option('formData', formData);//参数改变完成赋值
		  d.resolve(file);//然后继续发送文件
          return d.promise();
        }
      });
      this.uploader = WebUploader.create(this.options);//初始化webupload
      document.querySelector('.webuploader-pick').innerHTML = '<button>上传附件</button>';//自定义上传按钮
      this.uploader.on('uploadProgress', (file, percentage) => {
        console.log(percentage)//文件上传进度
      });
      this.uploader.on('uploadSuccess', (file, res) => {
         console.log(res)//文件上传成功
      });
      this.uploader.on('error', type => {
         console.log(type)//文件上传格式校验失败
      });
      this.uploader.on('uploadError', (file, reason) => {
         console.log(reason)//文件上传失败
      });
    },
	destroyed() { //页面注销后销毁实例
      WebUploader.Uploader.unRegister('file-store-token');//删除注册的插件
      if (this.uploader) {
        try {
          this.uploader.destroy();
        } catch (e) {
          //
        }
      }
    }
  };
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值