使用原生input的file属性上传图片和element的多路径上传图片

Posted 2020-11-22 summer06

//使用原生的input属性
//作品上传
                <input
                class="uploading__input"
                name="file"
                @change="readImg($event,‘work‘)"
                type="file"
                id="file"
                value=""
                accept="image/*"
                capture="camera"
              >
//封面上传 
                <input
                class="uploading__input"
                name="file"
                @change="readImg($event,‘cover‘)"
                type="file"
                id="file"
                value=""
                accept="image/*"
                capture="camera"
              >
// 上传
    readImg(event) {
      console.log(event);
      let file = event.target.files[0];
      let param = new FormData(); // 创建form对象
      param.append("picture", file); // 通过append向form对象添加数据
      console.log(param.get("picture")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { "Content-Type": "multipart/form-data" }//设置 请求头
      };
      uploading_api(param, config).then(res => {
        this.uploadfrom.picture = res.data;
        this.$message.success("上传成功");
      });
    },
使用element批量上传

   结构:   
　　  <el-upload
            class="uploading-wrap"
            :action="actionUrl" //上传路径 `${base.url}home/uploading`,

            :file-list="fileList" //存放图片的数组
            :on-preview="handlePictureCardPreview" //预览
            multiple //批量
            :limit="limitnumber" //最大个数
            list-type="picture-card"//样式
            :on-exceed="isexceed" //超过最大个数的回调
            :on-success="issuccess" // 成功的回调
          >
            <div class="uploading">
              <i
                class="iconfont upload_icon"
                style="color: #FF8A00;display:block;font-size: 38px;"
              >&#xe605;</i>
              <p class="uploading-text1">点击添加作品</p>
              <p class="uploading-text2">支持psd/png/jpg等格式/RGB模式,尺寸不超过800*800px,大小不超过5M</p>
            </div>
          </el-upload>

    <!-- 图片预览 -->

    <el-dialog :visible.sync="dialogVisible">

      <img width="100%" :src="dialogImageUrl" >

    </el-dialog>

 

methods:

    // 预览

    handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url;

      this.dialogVisible = true;

    },

    // 上传图片成功的钩子

    issuccess(res, files, fileList) {

      this.uploadfrom.file = fileList;

    },