图片上传

图片上传

1、blob二进制

实现步骤:

1. 准备一个input框,隐藏
2. 点击按钮,触发input框
3. 监听input框的change事件,拿到数据

<div><img :src="cover"  style="width: 400px; height: 400px" /></div>
<input  type="file" ref="ipt" style="display: none" @change="changeImg"/>
<button  @click="chooseImg">+选择封面 </button>

点击按钮，显示文本域，选择图片后触发事件

chooseImg () {
      this.$refs.ipt.click()
    },
    changeImg (e) {
      const file = e.target.files[0]  //  获取图片资源文件
      if (!e.target.files.length) return this.$message.error('请选择图片')
      if (file.size / 1024 / 1024 > 2) {
        return this.$message.error('请选择小于2M的照片')
      }
      //调用URL.createObjectURL()将图片转为blob二进制
      const blobImg = URL.createObjectURL(file)
      this.cover = blobImg
    }

2、base64 格式

chooseImg () {
      this.$refs.ipt.click()
    },
changeImg (e) {
      // 判断选择的图片是否超过2M
      const file = e.target.files[0]
      if (file.size / 1024 / 1024 > 2) {
      return this.$message.error('请选择小于2M的照片')
      }
      
      const file = e.target.files[0]  //  获取图片资源文件
      // 判断是否选择了图片，有图片就解禁上传按钮
      if (e.target.files.length) {
        this.disabled = false
      }
     
      const fr = new FileReader()   //  使用 new FileReader()将图片转换成base64
      fr.readAsDataURL(file)       //  读取文件
      
      fr.onload = () => {  //  监听文件何时读取完毕 将读取后图片文件赋给imgSrc
        this.imgSrc = fr.result 
      }

3、存到三方云服务器（阿里云，七牛云，腾讯云）

在项目中安装依赖

npm i cos-js-sdk-v5 --save

实例化cos对象

const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'xxx', // 身份识别ID
  SecretKey: 'xxx' // 身份秘钥
})

上边用到的SecretId和SecretKey去腾讯云里配置

使用cos对象完成上传

主要是用cos.putObjectapi来完成上传功能，代码如下：

  if (res.file) {
    // 执行上传操作
    cos.putObject({
      Bucket: 'xxxxxx', /* 存储桶 */
      Region: 'xxxx', /* 存储桶所在地域，必须字段 */
      Key: res.file.name, /* 文件名 */
      StorageClass: 'STANDARD', // 上传模式, 标准模式
      Body: res.file // 上传文件对象
    }, (err, data) => {
      console.log(err || data)
      // 上传成功之后
      if (data.statusCode === 200) {
        this.imageUrl = `https:${data.Location}`
      }
    })
  }
}