vue+springboot图片预览、上传

1、前端

   <el-form-item label="封面">

          　　　　　　　　　<el-button
            class="fileParent"
            type="success"
            icon="el-icon-plus"
            style="background:#273C48"
            @change="uploadFile"
          >
            <input class="file" type="file" multiple="multiple" @change="uploadFile">
            <img :src="tempImg" style="width: 250px;height: 300px;">
            <!-- :src="tempImg" -->
          </el-button>
        </el-form-item>

async uploadFile(e) {
      var formData = new FormData()
      for (var i = 0; i < e.target.files.length; i++) { // 循环获取上传个文件
        formData.append('files', e.target.files[i])
      }
      // formData.append('company', 'xxxxxx')
      //预览
      var _this = this
      var files = e.target.files[0]
      if (!e || !window.FileReader) return // 判断是否支持FileReader
      var reader = new FileReader()
      reader.readAsDataURL(files) // 文件转换
      reader.onloadend = function() {
        _this.tempImg = this.result
      }

      try {
       //上传
        uploadImage(formData).then(response => {
          // var product = JSON.stringify(response)
          _this.list.unshift(response)
          _this.dialogFormVisible = false
          _this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
        })
      } catch (ex) {
        console.log(ex)
      }

      this.$notify({
        duration: 3000,
        title: '成功',
        message: '上传成功！',
        type: 'success'
      })
    },

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
	// baseURL:"/dev-api",
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || '成功',
        type: 'success',
        duration: 1 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
	  if(response.status === 200)
	  {
		  return res
	  }else{
     
	  }
	    return Promise.reject(new Error(res.message || 'Error'))
	  
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

export function uploadImage(data) {
	return request({
		url: baseURL + '/API/fileUpload',
		processData: false,
		contentType: false,
		method: 'post',

		data

	})
}

2、后端

 @CrossOrigin
    @ResponseBody
    @RequestMapping(value = "/API/fileUpload", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    public String fileUpload(@RequestBody MultipartFile[] files,HttpServletRequest request) {
        if (files[0].isEmpty()) {
            System.out.println("文件为空");
            return null;
        }
        try {
            //2.根据时间戳创建新的文件名，这样即便是第二次上传相同名称的文件，也不会把第一次的文件覆盖了
            String fileName = System.currentTimeMillis() + files[0].getOriginalFilename();
            //3.通过req.getServletContext().getRealPath("") 获取当前项目的真实路径，然后拼接前面的文件名
            String destFileName = request.getServletContext().getRealPath("") + "uploaded" + File.separator + fileName;
            //4.第一次运行的时候，这个文件所在的目录往往是不存在的，这里需要创建一下目录（创建到了webapp下uploaded文件夹下）
            File destFile = new File(destFileName);
            destFile.getParentFile().mkdirs();
            //5.把浏览器上传的文件复制到希望的位置
            files[0].transferTo(destFile);
            //6.把文件名放在model里，以便后续显示用

        } catch (FileNotFoundException e) {
            e.printStackTrace();
            return "上传失败," + e.getMessage();
        } catch (IOException e) {
            e.printStackTrace();
            return "上传失败," + e.getMessage();
        }

        return "showImg";
    }