纯前端实现图片上传功能

使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能

首先简单了解一下ElmentUi的upload组件封装的自有属性：

1. action ：必须填参数，主要用来存放上传地址；如果你认为自定义上传要使用到action这个属性那么你就大错特错了
2. headers ：设置上传请求的头部，对应的参数必须是一个参数
3. multiple：设置是否运行上传多个文件/图片；
   码字太难，不说上图
   这些属性在我们开发过程中可能都会使用到所以大家还是要认真了解
   

了解了upload的基本属性之后我们要开始上硬菜了

云服务器对应的配置信息

uploadData: {
     
      SecretId: 'AKIDgCYlxxAe35vWrKDbS2pOgbHitoUywIAA', //密钥id
      SecretKey: 'vb4P1ShkgOxKXbQ3TiiWEl5EBuSlxC81',//密钥的key
      bucket: 'uttc-test-1259379841',//服务器名称信息
      region: 'ap-chengdu'//服务器位置信息
},//

实现自定义上传主要使用的是upload的http-request属性，我们可以设置自定的上传服务器地址，覆盖action的默认地址

<el-upload
            action
            ref="upload"
            list-type="picture-card"
            :http-request="handleUpload"
            :file-list="fileList"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :show-file-list="true"
            :multiple="false"
            :limit="1"
            accept="image/jpeg, image/jpg, image/png"
            style="position: relative;"
          >
            <i class="el-icon-plus"></i>
</el-upload>

编写自定义上传函数handleUpload()，可能会有很多小伙伴疑惑COS是个什么东东，别急下面我会做出详细的解释，可能不是特别准确，希望大家指正
http-request回调中获取的对象

 handleUpload(param) {
     
      let file = param.file;//http-request会获取到自定义上传的文件对象这个对象
      if (!file) return;
      let cos = new this.COS({
     
        SecretId: this.uploadData.SecretId, //密钥id
        SecretKey: this.uploadData.SecretKey //密钥的key
      });
      let bucket = this.uploadData.bucket;
      let region = this.uploadData.region;
      let upload_dir = "activeCenter/stuFaceImage/";
      let fileName =
        "stuFaceImage" +
        file.uid +
        "." +
        file.name.split(".")[file.name.split(".").length - 1];
      cos.putObject(
        {
     
          Bucket: bucket,
          Region: region,
          Key: upload_dir + fileName,
          Body: file
        },
        (err, data) => {
     
          if (err) {
     
            self.$message.error({
     
              message: err.error
            });
          } else {
     
            this.img =
              "https://" +
              bucket +
              ".cos." +
              region +
              ".myqcloud.com/" +
              upload_dir +
              fileName;
            console.log(this.img);
          }
        }
      );
    },

接下来我们只需要将this.img发送给后端就ok这样就实现了一个简单的将本地图片上传到腾讯云服务器的功能