图片上传

在我们日常的项目开发中，图片上传是一个很常见的需求。一些常见的UI框架都已经集成了图片上传组件，然而有时候这些组件并不能满足我们的需求，这时候就需要自己写组件实现上传，这就需要弄懂上传的原理以及里面的知识点。本次我就通过简单的代码，为大家解析图片上传的各个知识点。

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

前端通过 <input type="file"/>获取上传文件，然后通过ajax的post(设置type为multipart/form-data)上传后端，后端取到文件后保存至服务器并返回路径。

2、微信jssdk图片上传

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

image.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