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

路由转发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：

      

        

        
          
        
      
      

        
            
                取 消
                上传图片
            
        
      
      

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 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 saveFile(HttpServletRequest request,
                                  MultipartFile file, List 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);
      }
    },