vue，实现图片预览

点击图片预览显示图片，直接贴代码

 <el-dialog
            title="图片预览"
            :close-on-click-modal="false"
            :append-to-body="true"
            :visible.sync="visibleImg">
        <div class="modal-content">
          <el-row v-if="isShowImgUpload" style="padding-left:100px;padding-right:100px;">
            <el-col :span="4" style="color:white">1</el-col>
              <el-col :span="16">
                <div style="position:relative;background-color: #f0f3fa;">
                   <img
                    :src="localUrl"
                    :preview-src-list="[localUrl]"
                    style="width:100%;height:100%;"
                    fit="scale-down"
                  />
                </div>
              </el-col>
            <el-col :span="4" style="color:white">1</el-col>
          </el-row>
        </div>
      </el-dialog>

    return {
 isShowImgUpload:false,
      localUrls:"",
      visibleImg:false
        }
  },

点击图片预览

viewImg(row){
      this.$nextTick(() => {
        this.showImg(row);
      });
    },
     showImg (row) {
      this.visibleImg = true;
      this.localUrl = row.remarks;  
      this.isShowImgUpload = true;//呈现本地预览组件
      },

重要是我们这里存的url地址其实是两个，一个是filePath，一个是 url
保存文件 用 filePath，显示图片用url，所以上传图片的方法java代码如下

@RequestMapping("/auto/{uuid}")
    public ResultMap auto(@PathVariable("uuid") String uuid,@RequestParam MultipartFile file){
    	if (!file.isEmpty()) {
    		//设置文件的保存路径
    		SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
            String filePath = sysConfigService.getValue("filePath") + "\\" + uuid + "\\" +  df.format(new Date()) + file.getOriginalFilename();
            //http://ip+端口号"+根据自己的需求设置
    		String url = "http://ip+端口号"+ "\\" +"upload" + "\\" + uuid + "\\" +  df.format(new Date()) + file.getOriginalFilename();
    		File tempFile = new File(filePath);
            if (!tempFile.getParentFile().exists()) {
            	tempFile.getParentFile().mkdirs();
            }
            try {
            	file.transferTo(new File(filePath));
            } catch (IOException e) {
                e.printStackTrace();
                return ResultMap.error(-1, "文件上传失败") ;
            }
            SysFileEntity sysFile = new SysFileEntity();
        	sysFile.setFileName(file.getOriginalFilename());
        	sysFile.setFilePath(filePath);//保存图片的路径
        	sysFile.setFileSize(file.getSize());
        	sysFile.setFileType(file.getOriginalFilename().split("[.]")[1]);
        	sysFile.setAttachmentId(uuid);
        	sysFile.setUploadDate(new Date());
        	sysFile.setUploadUser(this.getUser().getUsername());
        	sysFile.setRemarks(url);//显示图片的url，需要回显到前端
        	sysFileService.insert(sysFile);
    	}
        return ResultMap.ok();
    }

完成到这里有一个很重要的问题，图片跨域无法显示，这里我们需要用到nginx映射，在服务器端的nignx配置文件中添加图片的映射地址，以我的为例，把这段添加到nginx.conf中即可。

location /upload{
			root  d:;
			add_header Access-Control-Allow-Origin '*';
			add_header Access-Control-Allow-Headers X-Requested-With;
			add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
			if ($request_method = 'OPTIONS') {
				return 204;
			}

需要注意的是这种方式只适用于服务器端，本地开发过程中，上传的图片就无法回显了，但是对我来说影响不大，毕竟客户可以用没有问题我就感激涕零了，谢谢