ue 富文本框WangEditor上传图片到七牛云,富文本框存储图片地址
思路 可以直接通过前端上传到七牛云,网络上的方法没有调试成功.所以我采用的思路是
前端上传图片到=>后端服务器=>七牛云=>返回前端图片地址
1.前端WangEditor控件的配置如下
this.editor.customConfig.uploadImgShowBase64 = false // base 64 存储图片
this.editor.customConfig.uploadImgServer = this.$http.BASE_URL + '/api/file/webupload/upload?uploadPath=/wangeditor/img' // 配置服务器端地址
this.editor.customConfig.uploadImgHeaders = {} // 自定义 header
this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
customInsert: (insertImg, result, editor) => {
// 图片上传成功，插入图片的回调 具体根据你返回的数据存储地址作为insertImg的入参
insertImg(result.url)
}
2.后端接收到服务器,服务器上传到七牛云,然后删除服务器的图片
/**
* 上传文件
* @return
* @throws IOException
* @throws IllegalStateException
*/
@RequestMapping("qiNiuYun/upload")
public AjaxJson qiNiuYun( HttpServletRequest request, HttpServletResponse response,MultipartFile file) throws IllegalStateException, IOException {
AjaxJson j = new AjaxJson();
String uploadPath = request.getParameter("uploadPath");
Calendar cal = Calendar.getInstance();
int year = cal.get(Calendar.YEAR);
int month = cal.get(Calendar.MONTH )+1;
String fileDir = FileKit.getAttachmentDir()+uploadPath+"/"+year+"/"+month+"/";
// 判断文件是否为空
if (!file.isEmpty()) {
String name = file.getOriginalFilename ();
if(fileProperties.isAvailable (name)) {
// 文件保存路径
// 转存文件
FileUtils.createDirectory (fileDir);
String filePath = fileDir + name;
File newFile = FileUtils.getAvailableFile (filePath, 0);
file.transferTo (newFile);
String url=QiNiuYunUploadUtil.fileUpload(newFile.getAbsolutePath (), System.currentTimeMillis()+name);
j.put ("url", url);
//把服务器上的文件删除
//new File(filePath).delete();
newFile.delete();
return j;
}else{
return AjaxJson.error ("请勿上传非法文件!");
}
}else {
return AjaxJson.error ("文件不存在!");
}
}
3.以上代码用到的七牛云的工具类1
package com.jeeplus.modules.utils; /** * 官方说:有些情况下，七牛返回给上传端的内容不是默认的hash和key形式， * 这种情况下，可能出现在自定义returnBody或者自定义了callbackBody的情况下， * 前者一般是服务端直传的场景，而后者则是接受上传回调的场景，这两种场景之下， * 都涉及到需要将自定义的回复内容解析为Java的类对象，一般建议在交互过程中， * 都采用JSON的方式，这样处理起来方法比较一致，而且JSON的方法最通用。 * 详情:https://developer.qiniu.com/kodo/sdk/1239/java#server-upload * ctrl+f 输入关键字搜索:解析自定义回复内容 */ public class MyPutRet { public String key; public String hash; public String bucket; public long fsize; public String getKey() { return key; } public void setKey(String key) { this.key = key; } public String getHash() { return hash; } public void setHash(String hash) { this.hash = hash; } public String getBucket() { return bucket; } public void setBucket(String bucket) { this.bucket = bucket; } public long getFsize() { return fsize; } public void setFsize(long fsize) { this.fsize = fsize; } }
4.以上代码用到的七牛云的工具类2 换上你的七牛云配置可以直接运行main方法测试
package com.jeeplus.modules.utils; import cn.hutool.core.lang.UUID; import com.jeeplus.common.json.AjaxJson; import com.qiniu.cdn.CdnManager; import com.qiniu.common.QiniuException; import com.qiniu.common.Zone; import com.qiniu.http.Response; import com.qiniu.storage.BucketManager; import com.qiniu.storage.Configuration; import com.qiniu.storage.UploadManager; import com.qiniu.storage.model.DefaultPutRet; import com.qiniu.storage.persistent.FileRecorder; import com.qiniu.util.Auth; import com.qiniu.util.StringMap; import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import java.nio.file.Paths; public class QiNiuYunUploadUtil { // 设置需要操作的账号的AK,https://developer.qiniu.com/kodo/sdk/1239/java#upload-token private static final String ACCESS_KEY = "111111111c87dH"; // 设置需要操作的账号的SK,https://developer.qiniu.com/kodo/sdk/1239/java#upload-token private static final String SECRET_KEY = "45458nbnGQ4645ifEWD6545"; // 要上传的空间,https://developer.qiniu.com/kodo/sdk/1239/java#upload-token private static final String BUCKET = "545gfgdf"; // 域名domainOfBucket private static final String DOMAIN_OF_BUCKET = "http://www.zyjs9.com"; // 华东是Zone.zone0(),华北是Zone.zone1(),华南是Zone.zone2(),北美是Zone.zoneNa0(), https://developer.qiniu.com/kodo/manual/1671/region-endpoint private static final Zone ZONE = Zone.zone1(); // todo public static Auth getAuth() { return Auth.create(ACCESS_KEY, SECRET_KEY); } /** * 获取上传凭证,https://developer.qiniu.com/kodo/sdk/1239/java#upload-flow */ public static String getUploadCredential() { return getAuth().uploadToken(BUCKET); } public static String getUpToken(String bucketName, String key) { //insertOnly 如果希望只能上传指定key的文件，并且不允许修改，那么可以将下面的 insertOnly 属性值设为 1 return Auth.create(ACCESS_KEY, SECRET_KEY).uploadToken(bucketName, key, 3600, new StringMap().put("insertOnly", 0)); } /** * 构造一个带指定 Region 对象的配置类 */ public static UploadManager buildUploadManager() { return new UploadManager(new Configuration(ZONE)); } /** * 文件上传 * * @param filePath 需要上传的文件本地路径 * @param fileNameKey 需要自定义保存在七牛云的文件名字,即上传文件后保存在七牛云服务器中的文件名(默认不指定的情况下，以文件内容的hash值作为文件名) */ public static String fileUpload(String filePath, String fileNameKey) { try { String upToken = getUpToken(BUCKET, fileNameKey); Response response = buildUploadManager().put(filePath, fileNameKey, upToken); MyPutRet myPutRet = response.jsonToObject(MyPutRet.class); // DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class); // 解析上传成功的结果 return buildPublicFileUrl(myPutRet.getKey()); // 返回的图片url } catch (Exception ex) { ex.printStackTrace(); } return null; } /** * 根据文件名和域名返回图片的url,然后访问url直接就可以看到图片了 * * @param fileNameKey 需要自定义保存在七牛云的文件名字,即上传文件后保存在七牛云服务器中的文件名(默认不指定的情况下，以文件内容的hash值作为文件名) */ public static String buildPublicFileUrl(String fileNameKey) { try { String encodedFileName = URLEncoder.encode(fileNameKey, "utf-8"); return String.format("%s/%s", DOMAIN_OF_BUCKET, encodedFileName); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } return null; } /** * 私有空间返回文件URL * * @param fileNameKey 需要自定义保存在七牛云的文件名字,即上传文件后保存在七牛云服务器中的文件名(默认不指定的情况下，以文件内容的hash值作为文件名) * @param expireInSeconds 过期时间,私有空间文件的访问链接超时时间，单位（秒） */ public static String buildPrivateFileUrl(String fileNameKey, long expireInSeconds) { try { return getAuth().privateDownloadUrl(buildPublicFileUrl(fileNameKey), expireInSeconds); } catch (Exception e) { e.printStackTrace(); } return null; } /** * 字节数组上传文件,然后返回文件的url,然后可以直接在公网上访问url看到文件了 * * @param fileNameKey 需要自定义保存在七牛云的文件名字,即上传文件后保存在七牛云服务器中的文件名(默认不指定的情况下，以文件内容的hash值作为文件名) */ public static String charArrayUpload(String fileNameKey, byte[] uploadBytes) { try { Response response = buildUploadManager().put(uploadBytes, fileNameKey, getUploadCredential()); // DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class); // 解析上传成功的结果 MyPutRet myPutRet = response.jsonToObject(MyPutRet.class); return buildPublicFileUrl(myPutRet.getKey()); // 返回的文件url } catch (Exception ex) { ex.printStackTrace(); } return null; } /** * 断点续传 * * @param fileNameKey 需要自定义保存在七牛云的文件名字,即上传文件后保存在七牛云服务器中的文件名(默认不指定的情况下，以文件内容的hash值作为文件名) * @param localFilePath 文件路径, 如果是Windows情况下，格式是 D:\\qiniu\\test.png */ public static String breakPointUpload(String localFilePath, String fileNameKey) { try { // 如果是Windows情况下，格式是 D:\\qiniu\\test.png String localTempDir = Paths.get(System.getenv("java.io.tmpdir"), BUCKET).toString(); // 设置断点续传文件进度保存目录 FileRecorder fileRecorder = new FileRecorder(localTempDir); // 构造一个带指定Zone对象的配置类 Configuration cfg = new Configuration(ZONE); UploadManager uploadManager = new UploadManager(cfg, fileRecorder); Response response = uploadManager.put(localFilePath, fileNameKey, getUploadCredential()); // 解析上传成功的结果 // DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class); MyPutRet myPutRet = response.jsonToObject(MyPutRet.class); return buildPublicFileUrl(myPutRet.getKey()); // 返回的文件url } catch (Exception ex2) { ex2.printStackTrace(); } return null; } /** * 删除文件 * @param url 文件的名字 * @return * @throws Exception */ public static String delete(String url) throws Exception{ Configuration cfg = new Configuration(Zone.zone1()); String key = url; Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY); BucketManager bucketManager = new BucketManager(auth, cfg); try { Response delete = bucketManager.delete(BUCKET, key); String s = delete.toString(); return s; } catch (QiniuException ex) { //如果遇到异常，说明删除失败 System.err.println(ex.code()); System.err.println(ex.response.toString()); return null; }} /** * 刷新 * @param url 文件的全路径 * @throws QiniuException */ public static void refresh(String url) throws QiniuException{ String [] urls = {url}; Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY); CdnManager c = new CdnManager(auth); c.refreshUrls(urls); } // 测试 public static void main(String[] args) { // 上传图片 String defaultPutRet = fileUpload ("D:\\111.jpg","12345656"); System.out.println("====="+ System.currentTimeMillis()); /*String fileNameKey = defaultPutRet.key; // key是文件名 String s = buildPublicFileUrl(fileNameKey); // 返回的图片网址 System.out.println("ssss****" + s);*/ //String url = fileUpload("D:\\1.png", "1"); //System.out.println(url); } //删除 public AjaxJson de(String url){ String[] split = url.split("/"); String name =split[1]; try { Object delete = QiNiuYunUploadUtil.delete(url); QiNiuYunUploadUtil.refresh(url); return AjaxJson.success("成功").put("data",delete); } catch (Exception e) { e.printStackTrace(); return AjaxJson.error("失败"); } } }
