码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-11-20 13:06:08      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:最大   read   wrap   code   批量   ict   work   src   append   

//使用原生的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;
    },
 

 

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

标签:最大   read   wrap   code   批量   ict   work   src   append   

原文地址:https://www.cnblogs.com/summer06/p/11896679.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!