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

最新推荐文章于 2025-05-04 12:07:53 发布

亮亮大王

最新推荐文章于 2025-05-04 12:07:53 发布

阅读量3.9k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/weixin_39583725/article/details/103630706

版权

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

5 篇文章

订阅专栏

本文介绍了如何在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