el-upload+复制粘贴+批量进度条+压缩上传图片

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量229 收藏
点赞数 1
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h1606641309/article/details/132738759
版权
html部分
<template>
  <!-- 为了第一次截屏，粘贴在对应组件上 -->
  <div id="editable" contenteditable="true"></div>
  <div id="upload_box">
    <el-upload ref="uploadFiles" v-model:file-list="fileList" :class="[del ? 'uploadDelectPosition' : '']"
      :action="UploadImg" list-type="picture-card" :on-preview="handlePreview" :before-upload="beforeAvatarUpload"
      :on-remove="handleRemove" :on-success="handleSuccess" :limit="limits" :on-change="handleChange" multiple
      :http-request="selectPicUpload">
      <span v-if="videoFlag">上传中...</span>
      <el-icon v-if="!videoFlag">
        <Plus />
      </el-icon>
    </el-upload>
  </div>
</template>
js代码部分
<script>
/**上传图片压缩 */
import * as imageConversion from "image-conversion";
/**提示框 */
import { ElMessage } from "element-plus";
/**接口地址 */
import apiUrl from "@/Utils/Config.js";
import CryptoTools from '@/Utils/CryptoTools.js'
export default {
  props: {
    limits: {
      type: Number,
      default: 2,
    },
    del: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      /**图片上传路径 */
      UploadImg: apiUrl.UploadUrl,
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      imgUrls: [],
      /**进度条的进度， */
      videoUploadPercent: 0,
      /**是否显示进度条 */
      videoFlag: false,
    };
  },
  methods: {
    beforeAvatarUpload(rawFile) {
      if (rawFile.type != "image/jpeg" && rawFile.type != "image/png") {
        ElMessage.error("只能上传jpg与png格式");
        return false;
      }
      return new Promise((resolve) => {
        imageConversion.compress(rawFile, 0.4).then((res) => {
          resolve(res);
        });
      });
    },
    handleChange(file, fileList) {
      this.videoFlag = true;
      if (file.status == "success") {
        this.videoFlag = false;
      }
    },
    /**自定义图片上传 */
    selectPicUpload(obj) {
      var _that = this;
      // let fd = new FormData();
      let rawFile = obj.file;
      console.log(rawFile);
      if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
        ElMessage.error("只能上传jpg与png格式");
        return false;
      }
      new Promise((resolve) => {
        imageConversion.compress(rawFile, 0.4).then((res) => {
          resolve(res);
        });
      }).then((res) => {
        // fd.append("file", res, "file.png");
        // _that.$http.UploadImage(fd, (file) => {
        //   _that.videoFlag = false;
        //   _that.videoUploadPercent = 0;
        //   _that.imgUrls.push(file.rows);
        //   _that.$emit("ImgId", _that.imgUrls);
        // });
        CryptoTools.OSSUpload(res, (data => {
          if (data.Success) {
            _that.videoFlag = false;
            _that.videoUploadPercent = 0;
            _that.imgUrls.push(data.rows.url);
            _that.$emit("ImgId", _that.imgUrls);
          } else { }
        }))
      });
    },
    handleSuccess(file, fileList) {
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.imgUrls.push(file.url);
      console.log(this.imgUrls);
      this.$emit("ImgId", this.imgUrls);
    },
    handleRemove(file, fileList) {
      let index = this.imgUrls.indexOf(
        file.response?.Data.Item2.Url || file.url
      );
      this.imgUrls.splice(index, 1);
      this.$emit("ImgId", this.imgUrls);
    },
    handlePreview(file) {
      this.previewVisible = true;
      this.previewPath = file.response.data.url;
    },
    /**图片回显 */
    GetImage(val) {
      // console.log(val);
      this.imgUrls = val;
      let arr = [];
      val?.forEach((item, i) => {
        arr.push({ name: i + ".jpg", url: item });
      });
      this.fileList = arr;
      console.log(this.fileList);
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
    },

    /**粘贴上传实现 */
    // 监听截屏对应事件粘贴方法
    listenerPaste() {
      let _this = this;
      window.addEventListener("paste", function (event) {
        // event.preventDefault();
        event.stopPropagation();
        // 为了截屏时，粘贴在当前的组件，第一次必须促发一次
        (function () {
          document.getElementById("editable").click();
        })();
        _this.paste_img(event);
      });
    },
    // 粘贴方法
    paste_img(e) {
      let _this = this;
      if (e.clipboardData.items) {
        let ele = e.clipboardData.items;
        // 只能为图片的时候才可以粘贴图片
        for (var i = 0; i < ele.length; ++i) {
          if (ele[i].kind == "file" && ele[i].type.indexOf("image/") !== -1) {
            var fileObj = ele[i].getAsFile(); //获取图片信息

            window.URL = window.URL || window.webkitURL;
            var blobUrl = window.URL.createObjectURL(fileObj);
            fileObj.src = blobUrl;
            // console.log(blobUrl);
            this.convertImgToBase64(blobUrl, function (base64Img) {
              let blobData = _this.dataURLtoBlob(base64Img);
              // let formdata = new FormData(); // new一个formdata对象
              let _filename = new Date().getTime() + ".jpg"; // 修改文件名
              // formdata.append("file_upload", blobData, _filename); // key值, 二进制类型文件,文件名
              CryptoTools.OSSUpload(blobData, (data => {
                if (data.Success) {
                  let fileCopy = {
                    ...fileObj,
                    response: JSON.parse(JSON.stringify(data.rows)),
                    percentage: 100,
                    raw: fileObj,
                    status: "success",
                    name: fileObj.name,
                    size: fileObj.size,
                    type: fileObj.type,
                  };
                  _this.fileList.push({
                    name: data.rows.url,
                    url: data.rows.url,
                  });
                  _this.handleSuccess(data.rows, fileCopy, [fileCopy]);
                  window.removeEventListener("paste", _this.paste_img);
                }
              }))

              // _this.$http.UploadImage(formdata, (res) => {
              //   console.log("res", res);
              //   // 格式化文件对象，与el-upload的uploadSuccess方法返回文件对象对应
              //   let fileCopy = {
              //     ...fileObj,
              //     response: JSON.parse(JSON.stringify(res)),
              //     percentage: 100,
              //     raw: fileObj,
              //     status: "success",
              //     name: fileObj.name,
              //     size: fileObj.size,
              //     type: fileObj.type,
              //   };
              //   console.log(res);
              //   _this.fileList.push({
              //     name: res.rows,
              //     url: res.rows,
              //   });
              //   _this.handleSuccess(res, fileCopy, [fileCopy]);
              //   window.removeEventListener("paste", _this.paste_img);
              // });
            });
          }
        }
      } else {
        console.log("non-chrome");
      }
    },
    // base64Img
    convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement("CANVAS"),
        ctx = canvas.getContext("2d"),
        img = new Image();
      img.crossOrigin = "Anonymous";
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL(outputFormat || "image/png");
        // console.log("dataURL", dataURL);
        callback.call(this, dataURL);
        canvas = null;
      };
      img.src = url;
      // console.log(" img.src", img.src);
    },

    //将base64转换为blob
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
  },
  mounted() {
    this.listenerPaste();
  },
};
</script>
样式部分
<style lang="less" scoped>
// el-upload删除按钮进行定位让其显示出来
.uploadDelectPosition {

  /deep/ .el-upload-list__item-actions {
    // 放大图标进行隐藏
    .el-upload-list__item-preview {
      // display: none;
      position: absolute;
      top: calc(50% - 10px);
      left: calc(50% - 40px);
    }

    .el-upload-list__item-delete {
      position: absolute;
      top: calc(50% - 10px);
      left: calc(-50% - 55px);
    }
  }
}

/deep/ .el-upload {
  position: relative;

  .elProgress {
    svg {
      position: absolute;
      top: calc(50%);
      left: calc(43%);
      transform: translate(-60px, -55px);
      width: 120px !important;
      height: 120px !important;
    }

    span {
      position: relative;
      left: -4px;
      top: 3px;
    }
  }

}
</style>
使用
<!-- <UploadImg :limits="''" del @ImgId="getImageList" /> -->
<!-- limits 上传图片数目限制  :limits="''"表示无限制 默认限制是 2  -->
<!-- del 是否携带删除按钮 默认是不带删除的 -->
完整代码
<template>
  <!-- 为了第一次截屏，粘贴在对应组件上 -->
  <div id="editable" contenteditable="true"></div>
  <div id="upload_box">
    <el-upload ref="uploadFiles" v-model:file-list="fileList" :class="[del ? 'uploadDelectPosition' : '']"
      :action="UploadImg" list-type="picture-card" :on-preview="handlePreview" :before-upload="beforeAvatarUpload"
      :on-remove="handleRemove" :on-success="handleSuccess" :limit="limits" :on-change="handleChange" multiple
      :http-request="selectPicUpload">
      <!-- <el-progress
        v-if="videoFlag"
        class="elProgress"
        type="circle"
        :percentage="videoUploadPercent"
      ></el-progress> -->
      <span v-if="videoFlag">上传中...</span>
      <el-icon v-if="!videoFlag">
        <Plus />
      </el-icon>
    </el-upload>

    <!-- <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog> -->
  </div>
</template>
<!-- <UploadImg :limits="''" del @ImgId="getImageList" /> -->
<!-- limits 上传图片数目限制  :limits="''"表示无限制 默认限制是 2  -->
<!-- del 是否携带删除按钮 默认是不带删除的 -->
<script>
/**上传图片压缩 */
import * as imageConversion from "image-conversion";
/**提示框 */
import { ElMessage } from "element-plus";
/**接口地址 */
import apiUrl from "@/Utils/Config.js";
import CryptoTools from '@/Utils/CryptoTools.js'
export default {
  props: {
    limits: {
      type: Number,
      default: 2,
    },
    del: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      /**图片上传路径 */
      UploadImg: apiUrl.UploadUrl,
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      imgUrls: [],
      /**进度条的进度， */
      videoUploadPercent: 0,
      /**是否显示进度条 */
      videoFlag: false,
    };
  },
  methods: {
    beforeAvatarUpload(rawFile) {
      if (rawFile.type != "image/jpeg" && rawFile.type != "image/png") {
        ElMessage.error("只能上传jpg与png格式");
        return false;
      }
      return new Promise((resolve) => {
        imageConversion.compress(rawFile, 0.4).then((res) => {
          resolve(res);
        });
      });
    },
    handleChange(file, fileList) {
      this.videoFlag = true;
      if (file.status == "success") {
        this.videoFlag = false;
      }
    },
    /**自定义图片上传 */
    selectPicUpload(obj) {
      var _that = this;
      // let fd = new FormData();
      let rawFile = obj.file;
      console.log(rawFile);
      if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
        ElMessage.error("只能上传jpg与png格式");
        return false;
      }
      new Promise((resolve) => {
        imageConversion.compress(rawFile, 0.4).then((res) => {
          resolve(res);
        });
      }).then((res) => {
        // fd.append("file", res, "file.png");
        // _that.$http.UploadImage(fd, (file) => {
        //   _that.videoFlag = false;
        //   _that.videoUploadPercent = 0;
        //   _that.imgUrls.push(file.rows);
        //   _that.$emit("ImgId", _that.imgUrls);
        // });
        CryptoTools.OSSUpload(res, (data => {
          if (data.Success) {
            _that.videoFlag = false;
            _that.videoUploadPercent = 0;
            _that.imgUrls.push(data.rows.url);
            _that.$emit("ImgId", _that.imgUrls);
          } else { }
        }))
      });
    },
    handleSuccess(file, fileList) {
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.imgUrls.push(file.url);
      console.log(this.imgUrls);
      this.$emit("ImgId", this.imgUrls);
    },
    handleRemove(file, fileList) {
      let index = this.imgUrls.indexOf(
        file.response?.Data.Item2.Url || file.url
      );
      this.imgUrls.splice(index, 1);
      this.$emit("ImgId", this.imgUrls);
    },
    handlePreview(file) {
      this.previewVisible = true;
      this.previewPath = file.response.data.url;
    },
    /**图片回显 */
    GetImage(val) {
      // console.log(val);
      this.imgUrls = val;
      let arr = [];
      val?.forEach((item, i) => {
        arr.push({ name: i + ".jpg", url: item });
      });
      this.fileList = arr;
      console.log(this.fileList);
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
    },

    /**粘贴上传实现 */
    // 监听截屏对应事件粘贴方法
    listenerPaste() {
      let _this = this;
      window.addEventListener("paste", function (event) {
        // event.preventDefault();
        event.stopPropagation();
        // 为了截屏时，粘贴在当前的组件，第一次必须促发一次
        (function () {
          document.getElementById("editable").click();
        })();
        _this.paste_img(event);
      });
    },
    // 粘贴方法
    paste_img(e) {
      let _this = this;
      if (e.clipboardData.items) {
        let ele = e.clipboardData.items;
        // 只能为图片的时候才可以粘贴图片
        for (var i = 0; i < ele.length; ++i) {
          if (ele[i].kind == "file" && ele[i].type.indexOf("image/") !== -1) {
            var fileObj = ele[i].getAsFile(); //获取图片信息

            window.URL = window.URL || window.webkitURL;
            var blobUrl = window.URL.createObjectURL(fileObj);
            fileObj.src = blobUrl;
            // console.log(blobUrl);
            this.convertImgToBase64(blobUrl, function (base64Img) {
              let blobData = _this.dataURLtoBlob(base64Img);
              // let formdata = new FormData(); // new一个formdata对象
              let _filename = new Date().getTime() + ".jpg"; // 修改文件名
              // formdata.append("file_upload", blobData, _filename); // key值, 二进制类型文件,文件名
              CryptoTools.OSSUpload(blobData, (data => {
                if (data.Success) {
                  let fileCopy = {
                    ...fileObj,
                    response: JSON.parse(JSON.stringify(data.rows)),
                    percentage: 100,
                    raw: fileObj,
                    status: "success",
                    name: fileObj.name,
                    size: fileObj.size,
                    type: fileObj.type,
                  };
                  _this.fileList.push({
                    name: data.rows.url,
                    url: data.rows.url,
                  });
                  _this.handleSuccess(data.rows, fileCopy, [fileCopy]);
                  window.removeEventListener("paste", _this.paste_img);
                }
              }))

              // _this.$http.UploadImage(formdata, (res) => {
              //   console.log("res", res);
              //   // 格式化文件对象，与el-upload的uploadSuccess方法返回文件对象对应
              //   let fileCopy = {
              //     ...fileObj,
              //     response: JSON.parse(JSON.stringify(res)),
              //     percentage: 100,
              //     raw: fileObj,
              //     status: "success",
              //     name: fileObj.name,
              //     size: fileObj.size,
              //     type: fileObj.type,
              //   };
              //   console.log(res);
              //   _this.fileList.push({
              //     name: res.rows,
              //     url: res.rows,
              //   });
              //   _this.handleSuccess(res, fileCopy, [fileCopy]);
              //   window.removeEventListener("paste", _this.paste_img);
              // });
            });
          }
        }
      } else {
        console.log("non-chrome");
      }
    },
    // base64Img
    convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement("CANVAS"),
        ctx = canvas.getContext("2d"),
        img = new Image();
      img.crossOrigin = "Anonymous";
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL(outputFormat || "image/png");
        // console.log("dataURL", dataURL);
        callback.call(this, dataURL);
        canvas = null;
      };
      img.src = url;
      // console.log(" img.src", img.src);
    },

    //将base64转换为blob
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
  },
  mounted() {
    this.listenerPaste();
  },
};
</script>
<style lang="less" scoped>
// el-upload删除按钮进行定位让其显示出来
.uploadDelectPosition {

  /deep/ .el-upload-list__item-actions {
    // 放大图标进行隐藏
    .el-upload-list__item-preview {
      // display: none;
      position: absolute;
      top: calc(50% - 10px);
      left: calc(50% - 40px);
    }

    .el-upload-list__item-delete {
      position: absolute;
      top: calc(50% - 10px);
      left: calc(-50% - 55px);
    }
  }
}

/deep/ .el-upload {
  position: relative;

  .elProgress {
    svg {
      position: absolute;
      top: calc(50%);
      left: calc(43%);
      transform: translate(-60px, -55px);
      width: 120px !important;
      height: 120px !important;
    }

    span {
      position: relative;
      left: -4px;
      top: 3px;
    }
  }

}
</style>

小小菜鸡一枚（发抖）
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
主要介绍了vue+elementUI(el-upload)图片压缩,默认同比例压缩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
compat-libstdc++-33-3.2.3-69.el6.x86_64.rar
09-28
compat-libstdc++-33-3.2.3-69.el6.x86_64
vue3+ts+element-plus，用upload组件实现文件上传
qq_41114763的博客
07-11 5762
vue3+ts+element-plus，用upload组件实现文件上传（带参数），后台springboot
二次封装el-upload组件包含文件上传进度条、复制粘贴上传等的功能
weixin_45313351的博客
01-17 624
1. 支持图片上传进度条2. 支持粘贴上传图片行为3. 支持最大图片上传数量4. 支持图片大小限制5. 支持图片类型限制6. 支持图片预览。
调用el-upload的方法，实现粘贴图片上传，完全实现与手动/拖拽上传享用同样的样式和功能！
qq_43753654的博客
04-03 1888
起初，功能 是手动上传，后来因为不方便就改为，测试的时候，用户感觉前两种方式操作太过麻烦，必须要保存图片到本地才能实现这些操作，说句实在话我感觉也很麻烦，所以就研究使用上传操作。
el-upload支持粘贴上传图片
Nick_wing的博客
03-02 603
el-upload粘贴上传
el-upload实现复制粘贴图片
chenlim87的博客
09-26 436
项目上线后，经使用人员反馈，上传图片、视频每次要先保存到本地然后再上传，很是浪费时间，公司客服人员时间又很紧迫（因为要响应下一位客户的咨询），所以想直接复制图片到表单中，实现自动上传。border-bottom: 1px solid #ccc"`隐藏富文本工具栏，我们只是复制图片，用不到工具栏。3、上面代码中虽然配置了上传图片API，但是没有用到，因为图片默认使用了`base64格式`而不上传。5、使用`base64`格式插入图片后，会触发`onInsertedImage`事件。1、初始化富文本编辑器。
Vue3&el-upload 实现图片粘贴上传，截图粘贴上传
weixin_43680337的博客
12-14 984
用户点击左侧最上边的输入框，在按住control+V，就能把粘贴板复制的图片传输到el-upload组件中，并自动进行上传（上传后就是业务逻辑部分，识别图片中的文字或者表格，并在前端页面就能预览表格，还能下载机器生成的Excel文件，后续再写一篇文章介绍怎么实现页面上的表格一件复制，然后在本地的Excel或者WPS，Numbers等软件带格式的粘贴）。这个功能已经上线了，如果大家想看一下效果，可以。读取粘贴板内容并传给el-upload。代码实现，直接拷贝就能用。先定义一个input框。
vue，element。监听快捷键粘贴图片，添加到el-upload的列表。
RumbleWx的博客
08-16 225
粘贴图片，图片能够自动添加到el-upload组件的文件列表
el-upload组件实现ctrl+v黏贴上传文件
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
06-15 1431
el-upload组件一些常用的属性和方法总结
vue+axios+el-upload实现文件上传（带参数）：
01-03
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
图片复制上传，拖拽输入框上传，el-upload自定义上传方法（上传和备注框强关联）
qq_40591925的博客
11-04 315
1. 效果图： 2. 复制图片使用的方法： 1.通过监听paste方法，获取复制内容 2.获取复制内容中的clipboardData 3.获取file文件进行上传 <input @paste.native="handlePaste" /> handlePaste(value){ let files = value.clipboardData.files if(files){ files=files[0] }else{ files=valu
element-ui的upload 上传组件 照片墙当超过限定图片后隐藏上传按钮
weixin_42332641的博客
09-12 6481
隐藏上传组件。比如我想限制上传5张 ，上传到第五张后，上传组件隐藏， <el-upload accept=".png, .jpeg, .jpg, .gif" :limit="5" :action="`${baseApi}/systemController/v1.0/uploadImg`" list-type="picture-card" :file-li...
vue3+Element Plus 图片上传组件，支持微信粘贴上传图片
Bai_CYK的博客
12-06 329
vue3 中 使用 Element Plus 实现图片上传，支持微信剪贴板上传，base64
element上传增加粘贴上传图片功能
hy3528的博客
11-26 765
<el-upload class="upload-demo ml" ref="uploadMutiple" action="http://api110.herbplantist.com/sucai/public/index.php/post/post/uploadFile" ...
扩展element-ui el-upload组件，实现复制粘贴上传图片文件，带图片预览功能
qq790455894的博客
07-15 3605
扩展element-ui el-upload组件，实现复制粘贴上传图片文件，带图片预览功能
vue输入框粘贴图片并上传
weixin_53058401的博客
09-30 2124
通过HTML5新增的一个属性contenteditable 模仿输入框，并实现粘贴获取图片
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 1083
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
el-upload+springboot
04-03
el-upload是Element UI框架中的一个文件上传组件，而 Boot是一个用于构建Java应用程序的开发框架。结合使用el-upload和Spring Boot可以实现在前端页面上传文件，并在后端使用Spring Boot进行文件处理和存储。 在使用el-upload+Spring Boot时，需要进行以下步骤： 1. 在前端页面中引入Element UI的el-upload组件，并配置相关属性，如上传地址、文件类型限制等。 2. 在后端Spring Boot应用中创建一个接收文件上传请求的Controller，并使用@RequestParam注解获取上传的文件。 3. 在Controller中对接收到的文件进行处理，可以进行文件存储、文件格式验证等操作。 4. 返回处理结果给前端页面，可以是成功或失败的消息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值