【前后端分离项目实现图片上传】

以样例的形式来展示；其中包括前台获得数据进行显示时图片的处理；以及上传图片时的处理；

后端业务代码

@RestController
@RequestMapping("/photo")
@CrossOrigin //解决跨域访问问题，
public class PhotoController {

    @Value("${APP.path}")	//此处为在配置文件中写的本地路径
    private String PhotoPath;
    /**
     * 文件上传
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public Result<String> upload(MultipartFile file){
        String originalFilename = file.getOriginalFilename();

//        根据最后一个.的索引来截取后缀
        String substring = originalFilename.substring(originalFilename.lastIndexOf("."));
        String fileName = UUID.randomUUID().toString()+substring;
        File dir = new File(PhotoPath);
        if (!dir.exists()){
            dir.mkdir();
        }
        try {
            file.transferTo(new File(PhotoPath+fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return Result.success(fileName);
    }

    @GetMapping("/download")
    public void download(String name, HttpServletResponse response){
        try {
            //获取图片文件
            FileInputStream inputStream = new FileInputStream(new File(PhotoPath+name));
            //输出流
            ServletOutputStream outputStream = response.getOutputStream();

            response.setContentType("image/jpeg");

            int len = 0;
            byte[] bytes = new byte[1024];
            while ((len = inputStream.read(bytes)) != -1){
                outputStream.write(bytes,0,len);
                outputStream.flush();
            }
            outputStream.close();
            inputStream.close();
        } catch (Exception e) {
            System.out.println("无该图片！");
//            e.printStackTrace();
        }

    }
}

该代码分为两部分：

1. 一部分是upload模块；用来接收前端传过来的图片文件，将图片名使用UUID拼接后缀存入本地；
2. 另一部分是download模块；该部分是为前端提供获取本地图片的功能；例如上传完图片之后预览时使用；

前端部分

<el-upload
            class="avatar-uploader"
            action="string"
            :http-request="UploadImage"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过1024kb</div>
</el-upload>

以上只是将elementUI提供的 “action” 抛弃，转而使用自定义的上传请求：“:http-request” ，因为添加了：“:http-request” 所以 “action”不在起作用，但是不建议删除，留着就行，里面可以随便写反正不起作用；（方法请看下文实例）
注意的是：使用自定义的上传请求时， :on-success, :on-error 所指示的功能不会触发；

实例

接下来贴个完整实例（该实例主要演示从后台获得数据后将图片展示在table中；以及上传图像至服务器上传成功之后进行图片预览处理）：

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="userName" label="用户名"></el-table-column>
		
		<!--   此处为显示用户图像的代码     -->
        <el-table-column prop="faceImg" label="图像">
          <template slot-scope="{ row }">
                      <el-image style="width: 45px; height: 45px; border:none;cursor: pointer;"
                      :src="getImage(row.faceImg)"
                      :preview-src-list="[ `/photo/download?name=${row.faceImg}` ]" >
                     <div slot="error" class="image-slot">
                        <img src="../assets/noImg.png"  style="width: 45px; height: 45px; border:none;" >
                     </div>
                    </el-image>
          </template>
        </el-table-column>
      
    </el-table>
    
    <!-- 添加 -->
    <el-dialog :visible.sync="addFlag" title="添加用户信息" :close-on-click-modal="false">
<el-form :model="user" :rules="rules" ref="user">
        <el-form-item prop="userName">
          <em>用户名:</em><el-input v-model="user.userName" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="faceImg">
          <em>图像:</em>
          <el-upload
            class="avatar-uploader"
            action="string"
            :http-request="UploadImage"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过1024kb</div>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
  export default { //对外暴露vue对象
    data() { //定义的是vue对象的属性
      return {
        dialogVisible: false,
        imageUrl: '',
        fileList: [],
        fileName: '',
        rules: {
          userName: [{
            required: true,
            message: '该字段必填',
            trigger: 'blur'
          }]
        },
        addFlag: false, //定义显示添加对话框的显示标记
        userName: '',
        tableData: [], //定义表格中的数据，是一个数组
        user: { //封装用户对象，然后通过对象整体传递数据
          uid: 0,
          userName: '',
          faceImg: ''
        }
      }
    },
    methods: { //用户自定义方法，在此编写
      
      //显示用户图像
      getImage (faceImg) {
        return `http://localhost/photo/download?name=${faceImg}`
      },
      
      openAddDialog() { //打开添加对话框
        this.addFlag = !this.addFlag;
      },

      // 上传文件之前判断格式
      beforeAvatarUpload(file) {
        const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
        const fileTypeList = ['jpg', 'png']
        const isLt1M = file.size / 1024 / 1024 < 1
        if (!fileTypeList.includes(fileType)) {
          this.$message({
            message: '上传文件只能是jpg,png格式',
            type: 'error'
          })
          return false
        }
        if (!isLt1M) {
          this.$message.error({
            message: '上传文件大小不能超过 1MB!',
            type: 'error'
          })
          return false
        }
        return true
      },
      
		
		// 上传图片
      UploadImage(param){
            const formData = new FormData()
            formData.append('file', param.file)
            this.$http.post('http://localhost/photo/upload',formData).then(res =>{
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });

                // 回调，将服务器的图片资源下载到浏览器中进行显示
                this.imageUrl = `http://localhost/photo/download?name=${res.data.data}`
                this.fileName = res.data.data,
                console.log('上传图片成功')
              }else{
                console.log('图片上传失败')
                param.onError()
              }
            }).catch(e => {
                this.$message.error('出错了~');
              })
      },

    created() { //浏览器在渲染时立即执行该方法中的代码
    	//分页查询
    }
  }
</script>