基于vue+element的上传组件实现图片上传

基于Vue、Element-ui，封装组件为例子聊聊如何实现这个功能。其它组件实现方式思路一样的！

1. 云储存方式

常见的有七牛云，OSS（阿里云）等，这些云平台提供API接口，调用相应的接口，文件上传后会返回图片存储在服务器上的路径，前端获得这个路径保存下来提交给后端即可。流程很简单。

 

主要步骤：

1. 向后端发送请求，获取oss配置数据
2. 文件上传后，调用oss提供接口。
3. 文件上传完成，文件储存在服务器相关路径
4. 以接口的形式将返回的路径字段返回给前端，存到表单对象中。

 

代码

 视图层代码

<el-upload
     class="avatar-uploader"
     action="noAction"
     :headers="{ 'Content-Type': 'application/x-www-form-urlencoded' }"
     :show-file-list="false"
     :on-success="handleAvatarSuccess"
     :http-request="fileRequestBackId"
     :before-upload="beforeAvatarUpload">
         <img v-if="query.authenticationInfo.backId" 
         :src="query.authenticationInfo.backId" class="avatar">
          <div v-else class="avatar-uploader">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span class="addText">上传身份证</span>
          </div>
</el-upload>

　　elementUI的上传组件，http-request方法: 覆盖默认的上传行为，可以自定义上传的实现。

　　formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效 率。

 

      const params = new FormData() //创建FormData
      params.append('file', item.file)
      uploadFileToSecretOss(params).then(res => {
        if (res.data.code === '0') {
          // 拿到返回的上传路径，res.data.uploadUrl, 去提交表单
　　　　　　　// doSomethings
　　    } else {}
　　　　}) 
　　　},