vue上传图片

最新推荐文章于 2024-10-18 15:58:53 发布

小白成长记&

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量217

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/L1766038066/article/details/128394439

版权

本文介绍了如何使用Vue.js进行图片上传操作，包括单个图片和多个图片的上传实现，涵盖了前端文件处理的基本步骤。

摘要由CSDN通过智能技术生成

上传单个图片

<el-form-item  label="图标：" prop="icon">
          <el-upload list-type="picture-card" class="avatar-uploader" ref="file" action="#"
            :http-request="requestUpload" :show-file-list="false" :before-upload="beforeAvatarUpload">
            <img v-if="form.icon" :src="form.icon" class="avatar" />
            <i v-else class="el-icon-plus "></i>
          </el-upload>
        </el-form-item>
js
 // 上传图片
      requestUpload(params) {
        let fileData = new FormData();
        fileData.append('file', params.file);
        uploadUrl(fileData).then(response => {
          if (response.code === 200) {
            this.form.icon = response.url;
          } else {
            this.msgError(response.msg);
          }