Vue使用vue-image-crop-upload实现图片的上传与显示

目录

效果展示

具体操作

1.使用npm下载vue-image-crop-upload

2.前端代码分析

3.后端代码分析

---

效果展示

修改头像前

 修改后

这里说明一下这个组件可以让我们在修改头像的时候可以进行裁剪的操作。

具体操作

1.使用npm下载vue-image-crop-upload

npm i babel-polyfill -S
npm i vue-image-crop-upload -S

2.前端代码分析

（1）imagecropperShow = true 是开启组件的元素，imagecropperShow值为false是关闭，在上传图片成功后，要将这个值设置成false来关闭组件。

（2）<img :src="avatar"/>图片的显示，可以在cropSuccess方法中将img设置成上传的图片， this.avatar = imgDataUrl;

<template>
  <div>
    <div>
      <!-- 图片展示 -->
      <img :src="avatar"/>
      <!-- 修改头像的按钮 -->
      <button class="btn btn-default" @click="imagecropperShow = true">
        修改头像
      </button>
    </div>
    <div>
      <my-upload
        //没有这个可能无法关闭组件
        :modelValue.sync="imagecropperShow"
        :key="imagecropperKey"
        lang-type="zh"
        img-format="png"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        url="http://localhost:8088/upload"//这个是与后端网址
      ></my-upload>
    </div>
  </div>
</template>

<script>
// 使用头像上传组件
import myUpload from "vue-image-crop-upload";
import { mapGetters } from "vuex";
//我引入了我项目中的一个图片
import i from "@/assets/picture/personal.png";

export default {
  components: {
    "my-upload": myUpload,
  },
  data() {
    return {
      //设置初始值
      imagecropperShow: false,
      imagecropperKey: 0,
      //img的src值
      avatar: i
    };
  },
  methods: {
    cropSuccess(imgDataUrl, field) {
      console.log("-------- crop success --------");
      console.log(imgDataUrl);
      //把头像设置成上传的图片
      this.avatar = imgDataUrl;
      console.log(field);
    },
    //上传成功回调
    cropUploadSuccess(res, originPicName) {
      //res是后端返回的结果，originPicName是后端接收到图片的名字
      console.log("-------- upload success --------");
      console.log(res);
      this.imagecropperShow = false;
      this.imagecropperKey = this.imagecropperKey + 1;
    },
    //上传失败回调
    cropUploadFail(status, field) {
      console.log("-------- upload fail --------");
      console.log("上传失败状态" + status);
      console.log("field: " + field);
    },
  },
};
</script>

3.后端代码分析

（1）在yml中配置Springboot项目的虚拟路径

#文件上传的位置
file:
  ###静态资源对外暴露的访问路径
  staticAccessPath: /api/file/**
  ###静态资源实际存储路径
  uploadFolder: E:/项目/score/doc/

（2）配置类

/**
 * 文件下载配置虚拟路径，保存在指定的文件下
 */
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Value("${file.staticAccessPath}")
    private String staticAccessPath;
    @Value("${file.uploadFolder}")
    private String uploadFolder;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);
    }
}

 （3）后端Controller

@Slf4j
@RestController
@RequestMapping
public class UploadController {

    @Value("${file.uploadFolder}")
    private String baseLocation;

    /**
     * 文件上传
     * @param req
     * @return
     */
    @PostMapping("/upload")
    public R upload(MultipartHttpServletRequest multipartHttpServletRequest, HttpServletRequest req){
        //得到传过来的文件
        Map<String,MultipartFile> files = multipartHttpServletRequest.getFileMap();
        //得到头像文件
        MultipartFile file = files.get("avatar");
        if(!file.isEmpty()){
            System.out.println("文件不为空");
            //原始文件名
            String originFileName = file.getOriginalFilename();
            //截取原始文件名的后缀
            String suffix = originFileName.substring(originFileName.lastIndexOf('.'));
            //使用UUID重新生成文件名，防止文件名称重复造成文件覆盖
            String fileName = UUID.randomUUID().toString().replace("-","") +suffix;
            //创建一个目录对象
            File dir = new File(baseLocation);
            //判断basePath是否存在
            if(!dir.exists()){
                //如果不存在，就创建
                dir.mkdirs();
            }
            try {
                //转存文件到达指定位置
                file.transferTo(new File(dir,fileName));
            } catch (IOException e) {
                e.printStackTrace();
                //这里的MessageNews.MESSAGE_FAIL_UPLOAD_FAIL是一个提示消息，上传文件失败
                return R.error(MessageNews.MESSAGE_FAIL_UPLOAD_FAIL);
            }
            String address = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/api/file/" + fileName ;
            //上传地址在浏览器中打开的路径
            System.out.println(address);
            return R.success(fileName);
        }
        return R.error(MessageNews.MESSAGE_FAIL_UPLOAD_FAIL);
    }
}

address这里打印出来的网址在浏览器中能打开，并且是你上传的图片，就说明你后端配置好了，这里说明一下问我这是完成了图片的上传和显示没有保存在数据库中，这里要保存address的值进数据库就行了。