继续创造，加快生长！这是我参与「日新方案 10 月更文应战」的第22天，点击查看活动详情

1.运用element-ui中的el-upload

这是element-ui自带的上传文件组件,能够经过经过点击或者拖拽上传文件

官网链接

这儿我需求的是头像上传预览,所以我挑选用户头像上传的el-upload代码

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

2.封装组件

新建组件src/components/UploadImg/index.vue

• 这儿限制上传的图片一定为jpg格局:

const isJPG = file.type === ‘image/jpeg’;

• 限制图片大小小于2MB

const isLt2M = file.size / 1024 / 1024 < 2;

• URL.createObjectURL()能够把二进制文件转为一个Blob目标,然后img的src能够把blob地址解析显示图片

this.imageUrl = URL.createObjectURL(file.raw);

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格局!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

3.注册公共组件

• 假如上传图片组件运用的许多,能够把该组件注册为大局组件

// 大局注册组件
import UploadImg from '@/components/UploadImg'
export default {
  install(Vue) {
    Vue.component('UploadImg', UploadImg)
  }
}

• 假如运用的较少能够作为局部组件运用
• 每次运用是导入父组件并注册为组件即可

4.页面中运用组件

• 由于注册了公共组件,所以不需求在引入组件,直接写标签即可运用组件

    <!-- 职工相片 -->
      <el-form-item label="职工头像">
        <!-- 放置上传图片 -->
        <UploadImg />
        <img>
      </el-form-item>

5.运用腾讯云服务器来完结图片存储

前置基础：

1.在云服务器上的预备：申请cos服务器，装备密钥,设置cors访问console.cloud.tencent.com/cos

2.在代码层面的预备：

(1) 下载一个官方供给的操作cos服务的包(cos-js-sdk-v5)

(2) 用自己的密钥去实例化cos

(3) 具体做上传

在项目中装置依赖

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

实例化cos目标

在src/components/UploadImg中实例化Cos目标,传入身份id和key

留意:这是前端中的测试写法,实际不能够把身份密钥暴露在前端代码中

// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'xxx', // 身份辨认ID
  SecretKey: 'xxx' // 身份密钥
})

• 在腾讯云中找到id和秘钥

• 上边用到的SecretId和SecretKey在这儿找到：

运用cos目标完结上传

给el-upload注册http-request事件

• 把本来的action途径改为#
• http-request事件用于掩盖默许的上传行为，能够自界说上传的完结

  <el-upload
    class="avatar-uploader"
    action="#"
    :http-request="upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>

上传事件

upload(res) {
  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}`
      }
    })
  }
}

上边的Bucket和Region在这儿能够找到

留意:这儿不能运用function界说函数,要用箭头函数,由于this需求指向vue实例

图片成功预览