elementui + vue 上传多张图片

<el-form-item label="证明材料:" id="supmeta">
  <el-upload
     class="avatar-uploader"
     ref="otherLicense"
     action
     :auto-upload="false"
     :on-preview="handlePicPreview"
     :on-remove="handleRemove"
     :file-list="fileList"
     :on-change="otherSectionFile"
     list-type="picture-card"
     multiple
   >
     <i class="el-icon-plus avatar-uploader-icon"></i>
   </el-upload>
   <el-dialog :visible.sync="dialogVisible">
     <img width="100%" :src="dialogImageUrl" class="avatar" />
   </el-dialog>
 </el-form-item>
 data() {
   return {
     fileList: {},
     dialogVisible: false,
     dialogImageUrl: "",
   };
 },
 handlePicPreview(file) {
   this.dialogImageUrl = file.url;
   this.dialogVisible = true;
 },
 handleRemove(file, fileList) {
   this.fileList.map((item, index) => {
     if (item.uid == file.uid) {
       this.fileList.splice(index, 1);
     }
   });
 },
 beforeRemove(file, fileList) {
   return this.$confirm(`确定移除 ${file.name}?`);
 },

 otherSectionFile(file) {
   const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
   const isJPG = typeArr.indexOf(file.raw.type) !== -1;
   const isLt3M = file.size / 1024 / 1024 < 3;
   if (!isJPG) {
     this.$message.error("只能是图片!");
     this.$refs.upload.clearFiles();
     this.otherFiles = null;
     return;
   }
   if (!isLt3M) {
     this.$message.error("上传图片大小不能超过 3MB!");
     this.$refs.upload.clearFiles();
     this.otherFiles = null;
     return;
   }
   this.otherFiles = file.raw;
   // FormData 对象
   var formData = new FormData();
   // 文件对象
   formData.append("file", this.otherFiles);
   formData.append("filePath", "yuanchengyiliao");
   let config = {
     headers: {
       "Content-Type": "multipart/form-data",
     },
     methods: "post",
   };
   //调取接口,这里我的接口是封装好的
   this.$axios.bussUpload(formData, config).then((res) => {
     this.fileList.push(file);
     if (res.data.flag == "S") {
       this.otherPhotoObj = res.data.data.objectId;
       this.otherPhoto = res.data.data.url;
       this.otherLicense.push({
         certificationName: this.form.certificationName,
         certificationObj: this.otherPhotoObj,
         certificationUrl: this.otherPhoto,
       });
     } else {
       this.$message.error(res.data.message);
     }
   });
 },
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要使用 ElementUI 中的 Upload 组件来实现图片上传。具体步骤如下: 1. 在 Vue 组件中引入 ElementUIUpload 组件: ``` <template> <el-upload class="upload-demo" action="/api/upload" :on-success="handleSuccess" :before-upload="beforeUpload" :limit="1" :file-list="fileList" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </template> ``` 2. 在 Vue 组件中定义上传文件的处理函数 handleSuccess: ``` <script> export default { data() { return { fileList: [] }; }, methods: { handleSuccess(response, file, fileList) { console.log(response); this.fileList = fileList; }, beforeUpload(file) { const isJPG = file.type === "image/jpeg" || file.type === "image/png"; const isLt500K = file.size / 1024 < 500; if (!isJPG || !isLt500K) { this.$message.error("上传图片只能是 JPG/PNG 格式,且不超过 500KB"); } return isJPG && isLt500K; }, submitUpload() { this.$refs.upload.submit(); } } }; </script> ``` 3. 在后端 SpringBoot 中编写上传文件的 API: ``` @RestController @RequestMapping("/api") public class FileUploadController { @PostMapping("/upload") public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile file) { try { // 存储文件 byte[] bytes = file.getBytes(); Path path = Paths.get("uploads/" + file.getOriginalFilename()); Files.write(path, bytes); // 返回成功信息 return ResponseEntity.ok("File uploaded successfully"); } catch (IOException e) { e.printStackTrace(); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build(); } } } ``` 4. 在前端 Vue 中设置上传文件的 API 地址为后端 SpringBoot 中编写的 API 地址: ``` <el-upload class="upload-demo" action="/api/upload" :on-success="handleSuccess" :before-upload="beforeUpload" :limit="1" :file-list="fileList" :auto-upload="false"> ... </el-upload> ``` 这样,你就可以在前端使用 ElementUI+Vue 实现图片上传,并在后端使用 SpringBoot 接收上传图片文件了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值