用Vue来实现图片上传多种方式

项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的图片上传方式，在这总结分享一下，有什么建议或者意见，请大家踊跃提出来。

没有业务场景的功能都是耍流氓，那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面，有一些商品名称、信息等字段，还有需要上传商品轮播图的需求。

我们就以Vue、Element-ui，封装组件为例子聊聊如何实现这个功能。其他框架或者不用框架实现的思路都差不多，本文主要聊聊实现思路。

1.云储存

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

主要步骤

1. 向后端发送请求，获取OSS配置数据
2. 文件上传，调用OSS提供接口
3. 文件上传完成，后的文件存储在服务器上的路径
4. 将返回的路径存值到表单对象中

代码范例

我们以阿里的 OSS 服务来实现，们试着来封装一个OSS的图片上传组件。

通过element-ui的upLoad组件的 http-request 参数来自定义我们的文件上传，仅仅使用他组件的样式，和其他上传前的相关钩子（控制图片大小，上传数量限制等）。

<template>
  <el-upload
    list-type="picture-card"
    action="''"
    :http-request="upload"
    :before-upload="beforeAvatarUpload">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
  import {getAliOSSCreds} from '@/api/common' // 向后端获取 OSS秘钥信息
  import {createId} from '@/utils' // 一个生产唯一的id的方法
  import OSS from 'ali-oss'

  export default {
    name: 'imgUpload',
    data () {
      return {}
    },
    methods: {
      // 图片上传前验证
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
      },
      // 上传图片到OSS 同时派发一个事件给父组件监听
      upload (item) {
        getAliOSSCreds().then(res => { // 向后台发请求 拉取OSS相关配置
          let creds = res.body.data
          let client = new OSS.Wrapper({
            region: 'oss-cn-beijing', // 服务器集群地区
            accessKeyId: creds.accessKeyId, // OSS帐号
            accessKeySecret: creds.accessKeySecret, // OSS 密码
            stsToken: creds.securityToken, // 签名token
            bucket: 'imgXXXX' // 阿里云上存储的 Bucket
          })
          let key = 'resource/' + localStorage.userId + '/images/' + createId() + '.jpg'  // 存储路径，并且给图片改成唯一名字
          return client.put(key, item.file) // OSS上传
        }).then(res => {
          console.log(res.url)
          this.$emit('on-success', res.url) // 返回图片的存储路径
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
复制代码

传统文件服务器上传图片

此方法就是上传到自己文件服务器硬盘上，或者云主机的硬盘上，都是通过 formdata 的方式进行文件上传。具体的思路和云文件服务器差不多。

主要步骤

1. 设置服务器上传路径、上传文件字段名、header、data参数等
2. 上传成功后，返回服务器存储的路径
3. 返回的图片路径存储到表单提交对象中

代码示例

此种图片上传根据element