欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VUE+Java多图上传以及编辑时回显

程序员文章站 2024-01-03 13:17:10
...
路由转发js:
import {uploadFileAll} from '@/api/uploadAll'
import request from '@/utils/request'
//多张件上传
export function uploadFileAll(data,config) {
  return request({
    url:'/uploadFile/saveFile',
    method:'post',
    data: data,
    config: config
  })
}
template:
<el-form-item label="上传礼品图片:">
      <div>
        <el-input v-model="homeAdvertise.picture" class="input-width" v-if="homeAdvertise.picture === null"></el-input>

        <el-upload
          :multiple="multiple"
          action="/uploadPics"
          list-type="picture-card"
          :auto-upload="false"
          :http-request="uploadFile"
          ref="uploadPic"
          :file-list="fileList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div>
        <center>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleAddSomePicsInfo = false">取 消</el-button>
                <el-button type="primary" @click="addSomePeoplePicsForm">上传图片</el-button>
            </span>
        </center>
      </div>
      </el-form-item>

js:

addSomePeoplePicsForm: function () {
        let self = this;
        this.formPicsData = new FormData();
        this.$refs.uploadPic.submit();
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        uploadFileAll( this.formPicsData, config).then(res => {
          this.homeAdvertise.picture=res.data;
          this.$message({
            message: '上传成功',
            type: 'success',
            duration:1000
          });
        }).catch(res => {
          this.$message({
            message: '上传成功',
            type: 'success',
            duration:1000
          });
        });
      },

后台:

    @ApiOperation("图片上传")
    @RequestMapping(value="/saveFile",produces="application/json;charset=UTF-8")
    @ResponseBody
    public CommonResult filesUpload(@RequestParam(value = "myfiles" ) MultipartFile[] files,
                              HttpServletRequest request) {
        List<String> list = new ArrayList<>();
        if (files != null && files.length > 0) {
            for (int i = 0; i < files.length; i++) {
                MultipartFile file = files[i];
                // 保存文件
                list = saveFile(request, file, list);
            }
        }
        //测试
        for (int i = 0; i < list.size(); i++) {
            System.out.println("集合里面的数据" + list.get(i));
        }
        // 数组转String字符串
        String newStr = StringUtils.join(list, ",");
        System.out.println(newStr);
        return CommonResult.success(newStr);
    }

    private List<String> saveFile(HttpServletRequest request,
                                  MultipartFile file, List<String> list) {
        // 判断文件是否为空
        if (!file.isEmpty()) {
            try {
                // 保存的文件路径(如果用的是Tomcat服务器,文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中
                // )
                String filePath = "/project/tomcat/webapps/fileUpload/picture" + (new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" + file.getOriginalFilename());

                list.add(filePath);
                File saveDir = new File(filePath);
                if (!saveDir.getParentFile().exists()) {
                    saveDir.getParentFile().mkdirs();
                }

                // 转存文件
                file.transferTo(saveDir);
                return list;
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return list;
    }

回显(分隔字符串):

data() {
      return {
        fileList: [],
      }
    }
created(){
      if (this.isEdit) {
        findIntegralGiftsInfoById(this.$route.query.id).then(response => {
          this.homeAdvertise = response.data;
          let urlStr = response.data.picture.split(","); //logo地址
          urlStr.forEach(item => {
            let obj = new Object();
            obj.url = item;
            this.fileList.push(obj);
          });
        });
      }else{
        this.homeAdvertise = Object.assign({},defaultHomeAdvertise);
      }
    },

 

上一篇:

下一篇: