Vue【七】实现图片上传与预览

前端

图片上传

bash 复制代码

<template>
  <div class="comment-wrapper">
    <el-form :model="form" style="    padding: 20px;" label-width="80px">
      <el-form-item label="评价内容">
        <el-input v-model="form.comment_content"  type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          action="http://localhost:8081/upload/file"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="uploadSuccess"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

      </el-form-item>
      <el-form-item style="margin-top: 15px">
        <el-button type="primary" @click="submitForm">提交评价</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Comment",
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      img_url_list:[],
      form: {
        comment_username: window.sessionStorage.getItem("token"),
        comment_content: '',
        comment_img_url: ''
      }
    };
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      this.img_url_list.push(response.data);
    },
    handleRemove(file, fileList) {
      console.log(1, this.img_url_list);
      let name = file.response.data;
      for (let i=0; i<this.img_url_list.length; i++){
        if (this.img_url_list[i] == name){
          this.img_url_list.splice(i, 1)
        }
      }
      console.log(1, this.img_url_list);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm() {
      if(this.img_url_list.length > 0){
        let str = '';
        for (var i = 0; i < this.img_url_list.length; i++) {
          str += this.img_url_list[i]+ ",";
        }
        str = str.substr(0, str.length - 1);
        this.form.comment_img_url=str;
      }
      this.$http.post("/comment/add", this.form).then(result => {
        this.$message.success("评论成功");
        this.$router.push('/order');
      })
    }
  },
  created() {
    let orderId = this.$route.query.orderId;
    this.form.order_id = orderId;

  }

}
</script>

<style scoped>
.comment-wrapper{
  margin: 15px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 15px;
  height: 500px;
}
/deep/ .el-form-item{
  width: 50%;
  margin: 15px auto;
}
/deep/ .el-textarea__inner{
  height: 150px;
}
.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
</style>

图片预览

bash 复制代码

 <div class="comment-img" v-for="img in item.comment_img_list">
          <img :src="img" @click="open(img)"/>
        </div>

bash 复制代码

 open(src){
      this.$alert('<img style="width: 100%" src="'+src+'"></img>', '', {
        dangerouslyUseHTMLString: true
      });
    },

后台代码

bash 复制代码

package com.wang.wangblog.controller.admin;

import com.wang.wangblog.config.Constants;
import com.wang.wangblog.model.Vo.Result;
import com.wang.wangblog.utils.MyBlogUtils;
import com.wang.wangblog.utils.ResultGenerator;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.net.URI;
import java.net.URISyntaxException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

@Controller
@RequestMapping("/admin")
public class UploadController {

    @Value("${upload.path:E:\\imgs}")
    private String path;


    @PostMapping({"/upload/file"})
    @ResponseBody
    public Result upload(HttpServletRequest httpServletRequest, @RequestParam("file") MultipartFile file) throws URISyntaxException {
        String fileName = file.getOriginalFilename();
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        //生成文件名称通用方法
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");
        Random r = new Random();
        StringBuilder tempName = new StringBuilder();
        tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);
        String newFileName = tempName.toString();
        String month = new SimpleDateFormat("yyyyMM").format(new Date()) + File.separator;
        String destPath =  path + month;
        File fileDirectory = new File(destPath);
        //创建文件
        File destFile = new File(destPath + newFileName);
        try {
            if (!fileDirectory.exists()) {
                if (!fileDirectory.mkdir()) {
                    throw new IOException("文件夹创建失败,路径为：" + fileDirectory);
                }
            }
            file.transferTo(destFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
        Result result = ResultGenerator.genSuccessResult();
        result.setData(MyBlogUtils.getHost(new URI(httpServletRequest.getRequestURL() + "")) + "/upload/" +month+ newFileName);
        return result;
    }

}