vue+java图片上传

vue+java图片上传,第1张

文章目录
  • 前言
      • 1、流程及图
      • 2、前端:
        • 1.表单提交
        • 2.上传图片及相关方法
      • 3、配置文件application.xml
      • 3、后端
          • 1.控制器
          • 2.上传接口
          • 3.七牛云上传
          • 4.递归压缩图片
      • 4、上传如图
  • 总结


前言
1、流程及图

2、前端: 1.表单提交
	                <!-- 企业简称 -->
                <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
                    <el-form :model="editEntity" ref="editEntity"
                             label-width="80px"  class="demo-ruleForm" >
                        <el-row>
                            <el-col :span="2">
                                &nbsp;
                            </el-col>
                            <el-col :span="12">
                                &nbsp;&nbsp;&nbsp;
                            <el-button type="danger" disabled>{{editEntity.compayName}}</el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="企业名称" prop="name">
                                    <el-input type="text" placeholder="请输入企业名称,最多输入十个字"
                                              v-model="editEntity.name"></el-input>
                                </el-form-item>
                            </el-col>
                         
                            <el-col :span="12">
                                <el-form-item label="A类单位" prop="invoiceCompanyidA">
                                    <el-select size="mini" v-model="editEntity.invoiceCompanyidA" >
                                        <el-option v-for="invoiceCompanyItem in invoiceCompanyOptionsA" :key="invoiceCompanyItem.id"
                                                   :label="invoiceCompanyItem.name" :value="invoiceCompanyItem.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                          
                            <el-col :span="12">
                                <el-form-item label="A类公章" prop="taxImageUrl">
                                    <el-upload class="avatar-uploader" :action="uploadImageUrl"
                                               :multiple="false" accept="image/*" :limit="1024" :auto-upload="true"
                                               :show-file-list="false" :on-success="handleUploadSuccess1">
                                        <img v-if="editEntity.taxImageUrl"
                                             :src="editEntity.taxImageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="save()">确定</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </div>

                </el-dialog>

2.上传图片及相关方法
            handleUploadSuccess: function (res) {// 处理上传成功事件
                if (res.success) {// 成功
                    this.editAbbreviationFormEntity.imageUrl = res.data;
                } else {// 失败
                    this.$message.error(res.message);
                }
            },



3、配置文件application.xml
	
	<bean class="com.cherry.framework.service.impl.LocalFileServiceImpl">
		<property name="fileServerSavepath" value="${file_server_savepath}" />
		<property name="fileServerHttppath" value="${file_server_httppath}" />
	bean>

3、后端 1.控制器

	/**
	 * 文件目录:图片目录
	 */
	public static final String FILE_DIR_CACHET = "cachet";

	/**
	 * 上传图片
	 * @param file
	 * @return
	 */
	@RequestMapping("/uploadImage")
	@ResponseBody
	public Result uploadImage(MultipartFile file){
		return  fileService.uploadFile(file, Constants.FILE_DIR_CACHET);
	}

2.上传接口

	private String fileServerSavepath;

	private String fileServerHttppath;

	public String getFileServerSavepath() {
		return fileServerSavepath;
	}

	public void setFileServerSavepath(String fileServerSavepath) {
		this.fileServerSavepath = fileServerSavepath;
	}

	public String getFileServerHttppath() {
		return fileServerHttppath;
	}

	public void setFileServerHttppath(String fileServerHttppath) {
		this.fileServerHttppath = fileServerHttppath;
	}

	/**
	 * 上传到本地服务器
	 */
	public Result uploadFile(MultipartFile file, String dirName) {
		String filePath = dirName + "/" + UUID.randomUUID().toString();
		try {
			File dest = new File(fileServerSavepath, filePath);
			if (!dest.getParentFile().exists()) {
				dest.getParentFile().mkdirs();
			}
			file.transferTo(dest);
		} catch (IllegalStateException | IOException e) {
			String errorMsg = "上传文件[" + file.getOriginalFilename() + "]失败!";
			logger.error(errorMsg, e);
			return Results.uploadError();
		}
		return Results.uploadOk(fileServerHttppath + filePath);
	}

	/**
	 * 上传到七牛云
	 */
	public Result uploadFileQiniu(MultipartFile file) {
	String uuid = UUID.randomUUID().toString();
	InputStream is = null;
	try {
		is = file.getInputStream();
		String imgUrl = QiniuUpload.uploadFile(is , uuid);
		return Results.uploadOk(imgUrl);
	}catch (Exception e){
		e.printStackTrace();
	}finally {
		try {
			if (is != null) {
				is.close();
			}
		}catch (Exception e) {
			e.printStackTrace();
		}
	}
	return Results.error();
}

	/**
	 * 按指定大小压缩后上传到七牛云
	 */
	public Result uploadImageResize(MultipartFile file, String dirName, double destFileSize) {
		String uuid = UUID.randomUUID().toString();
		String filePath = dirName + "/" + uuid;
		try {
			File dest = new File(fileServerSavepath, filePath);
			if (!dest.getParentFile().exists()) {
				dest.getParentFile().mkdirs();
			}
			file.transferTo(dest);
			if((Double.isNaN(destFileSize)) || "".equals(destFileSize)){
				destFileSize = 15.0;
			}
			String imgUrl = QiniuUpload.uploadFile(ImageUtil.commpressImageRatio(dest,destFileSize), uuid);
			return Results.uploadOk(imgUrl);
		} catch (IllegalStateException | IOException e) {
			String errorMsg = "上传文件[" + file.getOriginalFilename() + "]失败!";
			logger.error(errorMsg, e);
			return Results.uploadError();
		}
	}

3.七牛云上传
   /**
     * 上传文件到七牛云(文件流)
     * @param is 文件流
     * @param key 文件名称
     * @return 云文件访问路径
     */
    public static String uploadFile(InputStream is, String key){
        //构造一个带指定 Region 对象的配置类
        Configuration cfg = new Configuration(qiniuConfig.getRegion());
        UploadManager uploadManager = new UploadManager(cfg);
        try {
            Response response = uploadManager.put(is, key, getAccessToken(), null, null);
            //解析上传成功的结果
            DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
            return qiniuConfig.getCdnPath() + putRet.key;
        } catch (QiniuException ex) {
            ex.printStackTrace();
        }
        return null;
    }
4.递归压缩图片

    /**
     * 按尺寸、精度及其他条件比例缩放
     * @param file
     * @param destFileSize 指定图片大小(单位:kb)
     * @throws IOException
     */
    public static InputStream commpressImageRatio(File file,double destFileSize) throws IOException {
        final int byteLenght = 1024; // 字节长度
        final double minRatio = 0.9; // 压缩比率
        double ratio = destFileSize/((double) file.length()/byteLenght);
        if(ratio >= minRatio){
            return new FileInputStream(file);
        }else {
            Thumbnails.of(file).scale(0.9).outputQuality(0.9).outputFormat("jpg").toFile(file);
            String path = file.getAbsolutePath();
            int i = path.lastIndexOf(".")+1;
            String suffix  = path.substring(i);
            if(!suffix.equals("jpg")){
                file = new File(file.getAbsolutePath()+".jpg");
                File file1 = new File(path);
                file1.delete();
            }
            double ratio1 =  destFileSize/((double) file.length()/byteLenght);
            if(ratio1 < minRatio){
                commpressImageRatio(file,destFileSize);
            }
            return new FileInputStream(file);
        }
    }
4、上传如图



总结 *随心所往,看见未来。Follow your heart,see night!*
**欢迎点赞、关注、留言,一起学习、交流!**

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/langs/874161.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-08
下一篇 2022-05-08

发表评论

登录后才能评论

评论列表(0条)

保存