​1、传统图片上传服务器

​1、传统图片上传服务器

标签：dataletfile 图片上传 plupload

在我们日常的项目开发中图片上传，图片上传是很常见的需求。一些常见的 UI 框架已经集成了图片上传组件。但是，有时这些组件并不能满足我们的需求。在这种情况下，我们需要自己编写组件来实现上传，这就需要了解上传的原理和其中的知识点。这次就通过简单的代码为大家分析一下图片上传的知识点。

​1、传统图片上传服务器

前端获取上传的文件，后端通过ajax post上传（设置类型为multipart/form-data），然后终端获取文件后保存到服务器返回路径。

2、微信jssdk图片上传

调用微信的jssdk，选择Image选择图片，uploadImage上传图片

图像.png

3、webuploader 图片上传

webuploader 最常用于百度 ueditor 编辑器图片上传。百度内置了webuploader上传插件，我们只需要修改相应逻辑即可实现阿里云oss上传

// 富文本编辑器图片上传
window.UEDITOR_CONFIG['imageUploadService'] = function (context, uploader) {
  return {
    /**
      * 触发fileQueued事件时执行
      * 当文件被加入队列以后触发，用来设置上传相关的数据 (比如: url和自定义参数)
      * @param {Object} file 当前选择的文件对象
      */
    setUploadData: function (file) {
      // 这里添加token
      getUploadToken(function (ossInfo) {
        file.ossInfo = ossInfo
        return file
      }, file)
    },
    /**
      * 触发uploadBeforeSend事件时执行
      * 在文件上传之前触发，用来添加附带参数
      * @param {Object} object 当前上传对象
      * @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数
      * @param {Object} headers 可以扩展此对象来控制上传头部
      * @returns 上传参数对象
      */
    setFormData: function (object, data, headers) {
      let ossInfo = object.file.ossInfo
      let key = ossInfo.dir + '' + randomString(10) + getSuffix(data.name)
      data.key = key
      data.policy = ossInfo.policy
      data.OSSAccessKeyId = ossInfo.OSSAccessKeyId
      data.success_action_status = 200
      data.signature = ossInfo.signature
      let imageList = context.imageList || []
      imageList.push({
        url: ossInfo.host + '/' + key
      })
      return data
    },
    /**
      * 触发startUpload事件时执行
      * 当开始上传流程时触发，用来设置Uploader配置项
      * @param {Object} uploader
      * @returns uploader
      */
    setUploaderOptions: function (uploader) {
      return uploader
    },
    /**
      * 触发uploadSuccess事件时执行
      * 当文件上传成功时触发
      * @param {Object} res 上传接口返回的response
      * @returns {Boolean} 上传接口返回的response成功状态条件 (比如: res.code == 200)
      */
    getResponseSuccess: function (res) {
      // console.log(context)
      return true
    },
    /* 指定上传接口返回的response中图片路径的字段，默认为 url */
    imageSrcField: 'url'
  }
}

4、plupload图片上传

p>

上传

我们公司的图片上传需要上传到阿里云oss，这里多使用plupload上传插件。

插件的特点

上传安装

yarn add plupload // 或者 npm install plupload --save

实例化对象

// 实例化一个plupload上传对象
let uploader = new plupload.Uploader({
  multi_selection: false, // 禁止多文件上传
  browse_button: id, // 触发文件选择对话框的按钮，为那个元素id
  url: 'http://oss-cn-hangzhou.aliyuncs.com', // 服务器端的上传页面地址
  filters: {
    mime_types: [ // 只允许上传图片
      {title: 'Image files',extensions: 'jpg,png,gif,jpeg'}
    ],
    max_file_size: '5mb', // 最大只能上传5mb的文件
    prevent_duplicates: false // 不允许选取重复文件
  },
  resize: {
    width: 320, // 压缩后宽
    height: 240, // 压缩后高
    crop: true, // 开启图片裁剪
    quality: 55, // 裁剪质量
    preserve_headers: false // 压缩后是否保留图片的元数据
  },
  init: {
    FilesAdded (up, files) {
      // 添加文件后的业务逻辑
    },
    FileUploaded: function (up, file, res) {
      // 上传完成后的业务逻辑
    },
    Error: function (up, err) {
      // 错误信息处理
    }
  }
})

图片验证

上传文件一般会验证图片，比如文件的类型、大小、格式、大小等。图像验证的配置是实例化并传递参数。如果发现校验不一致图片上传，就会调用Error。

图像.png

初始化

uploader.init() // 初始化

上传结果

getImgUrl (host, fileName) {
  let url = host + '/' + fileName
  this.$emit('getUrl', {
    url
  })
}

单个上传组件

封装成单个组件​1、传统图片上传服务器，只需要在组件内完成上传逻辑，绑定触发上传逻辑的dom元素即可。上传成功后就可以和父组件$emit通信了

  

    
      
    
  


export default {
  props: {
    id: String, // 图片id（每次调用的时候都是需要唯一的）
    size: { // 图片的尺寸
      type: String,
      default: '2048'
    }
  },
  mounted () {
    this.initPlupload(this.id)
  }
}

5 富文本编辑器集成

这里使用的富文本编辑器编辑器是国产的小wangeditor。本编辑器提供三方上传方式的集成：

但是上传到阿里云oss需要我们自己研究和实现。实现原理同上，wangeditor提供了图片上传按钮的dom元素，即editor.imgMenuId，只需要将这个id绑定到之前的plu​​pload即可实现上传

this.initPlupload(this.editor.imgMenuId)

图片上传配置方法应该在编辑器配置之前调用

6 base64 上传

我们前面提到的上传都是自动的，也就是点击plupload初始化提供的dom元素后触发上传。那么如果你想手动上传文件呢？

在 plupload 文档中，有 addFile() 方法。该方法调用成功后，会按照之前的逻辑，一次性完成上传。

以下示例是使用输入标签手动完成上传

uploadImg () {
  let files = this.$refs.uploadBtn.files[0]
  this.uploader.addFile(file)
}

实现手动上传文件后​1、传统图片上传服务器，实现base64图片上传后，只需将base64转成文件

uploadBase64 (base64Str) {
  let file = this.getFile(base64Str, new Date().getTime() + '.png')
  this.uploader.addFile(file)
}
getFile (dataurl, filename) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: mime })
}

7 反应集成

初始化方法和vue一样

componentDidMount(){
  this.initPlupload(this.state.id)
}

//获取上传结果

getImgUrl (host, fileName) {
  let url = host + '/' + fileName
  console.log(url)
  this.props.callback(url); // 子组件传给父组件
}

8 jQuery 集成

积分方法类似，原理相同。绑定Dom->传入文件->获取token->上传

标签：数据、让、文件、图像、上传、plupload