阿里云oss文件上传之plupload插件使用方法

本文介绍了如何在JavaScript和Vue.js环境中使用plupload插件进行阿里云OSS文件上传。首先,确保html页面有一个用于触发文件选择的元素,并配置其id。接着,安装plupload依赖,创建一个公共的`ali-oss.js`文件封装上传逻辑。在Vue应用中,可以在main.js中将uploader方法绑定到Vue原型以便于调用。最后,参考中文帮助文档以获取更多详细信息。

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

plupload使用概述:

html页面上必须得有一个触发浏览器文件选择弹框的元素,这个元素必须拥有一个id,这个id需要配置在plupload实例化方法中(下面有具体实例);

<a-button 
  id="selectLogoFiles">
  添加图片
</a-button>

plupload具体配置:

第一步,安装依赖

yarn add plupload
// npm install --save plupload

第二步,创建一个公共ali-oss.js文件封装上传方法;

import plupload from "plupload"
import tools from "@/utils/tools.js"

export default ({
  that = "",
  el = "",
  multi_selection = false,
  file_added = new Function(),
  file_uploaded = new Function(),
  uploader_progress = new Function(),
}) => {
  if(!el) {
    console.log("el 不能为空")
    return;
  }
  if(!that) {
    console.log("请传入this")
    return;
  }

  const uploader = new plupload.Uploader({
    runtimes: 'html5,flash,silverlight,html4',
    // 服务器上传地址 必须设置否则后续setOption没有作用
    url: 'https://oss-cn-beijing.aliyuncs.com',
    flash_swf_url: 'https://oss-cn-beijing.aliyuncs.com',
    silverlight_xap_url: 'https://oss-cn-beijing.aliyuncs.com',
    // 上传文件类型限制
    filters: {
      mime_types: [{
        title: "Image files",
        extensions: "jpg,gif,png,bmp"
      }, {
        title: "Vedio files",
        extensions: "mp4,avi,rm,rmvb,flv,mpg,mov,mkv"
      }
    ],
      // 限制上传文件大小
      max_file_size: '10mb',
      // 不允许选取重复文件
      prevent_duplicates: true
    }
  })

  // 设置上传配置
  uploader.setOption({
    browse_button: el,
    multi_selection: multi_selection
  });

  // 文件上传进度
  uploader.bind("UploadProgress", (uploader, file) => {
    console.log("上传");
    uploader_progress(file);
  })

  // 文件上传成功
  uploader.bind("FileUploaded", (up, file, info) => {
    file_uploaded(up, file, info, el);
  })

  // 文件添加成功并且上传
  uploader.bind("FilesAdded", (uploader, files) => {
    file_added(uploader, files, el);
    let ossUploadParams;
    // 请求签名、临时host、callback
    that.$store.dispatch("SET_OSS_PARAMS").then(res => {
      ossUploadParams = res;
      let host = ossUploadParams['host'];
      let policyBase64 = ossUploadParams['policy'];
      let accessid = ossUploadParams['accessKeyId'];
      let signature = ossUploadParams['signature'];
      let callbackbody = ossUploadParams['callback'];
      let key = ossUploadParams['dir'];

      let new_multipart_params = {
        'key': key + new Date().getTime() + tools.uuid(),
        'policy': policyBase64,
        'OSSAccessKeyId': accessid,
        'success_action_status': '200', //让服务端返回200,不然,默认会返回204
        'callback': callbackbody,
        'signature': signature,
      };

      uploader.setOption({
        'url': host,
        'multipart_params': new_multipart_params
      });

      uploader.start();
    })
  })

  return uploader;
}

为了方便在main.js中我把uploader方法绑定到Vue的原型上面了

	import uploader from "@/utils/ali-oss.js"
	Vue.prototype.$uploader = uploader;

第四步,调用

mounted(){
 this.filesUploader();
},
methods: {
 filesUploader() {
	let that = this;
	this.$uploader({
	 that: this,
	 el: "selectLogoFiles",
	 file_added(uploader, files) {
	  files.map(item => {
	    that.logoFile.push({
	      uid: item.id,
	      name: item.name
	    })
	  })
	 },
	 file_uploaded(uploader, file, info) {
	   that.log(uploader, file, info)
	 }
	}).init();
 }
}

中文帮助文档链接:link

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值