ueditor上传图片到服务器再次上传到OSS jsp版本

javaweb项目 jsp版本

基本配置网上都有直接上传图片





ueditor配置如上;

在控制器上传如下




jsp页面转到控制器


上传环境,接着上传oss


图片上传返回参数类



oss断点上传


贴一下源码

<div class="form-group">
                <label class="col-xs-3 control-label i_lab">发布内容:</label>
                <div class="col-xs-9">
                    <!-- <textarea class="form-control i_form_middel" rows="6"></textarea> -->
                    <!-- <textarea id="myEditor" class="form-control i_form_middel" rows="6" ></textarea> -->
                    <!-- style="width: 100%;height: 500px;" -->
                    <script id="editor" name="upfile" type="text/plain" style="width:1024px;height:500px;"></script>
                </div>
            </div>

var ue = UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl=function(action){
if (action == 'uploadimage' ||action== 'uploadscrawl' || action == 'uploadimage') {
//return this._bkGetActionUrl.call(this, action);
//return '${path}/tools/imageController/upload';
return '${pageContext.request.contextPath}/op/topic/uploadImage.shtml';
} else if(action =='uploadvideo') {
return '${pageContext.request.contextPath}/op/topic/uploadImage.shtml';
}  else if(action == 'listimage'){
return this._bkGetActionUrl.call(this, action);
} else{
return this._bkGetActionUrl.call(this, action);
}
}


public String uploadImage(HttpServletRequest request, HttpServletResponse response)throws IllegalStateException
, IOException {
response.setContentType("text/html;charset=UTF-8");
log.info("1");

ServletContext servletContext = request.getServletContext();
log.info("servletContext:"+servletContext);
        String uploadPath = servletContext.getRealPath("/") + "upload/";
        log.info("uploadPath:"+uploadPath);
ReturnUploadImage rui = null;// 这个是UEditor需要的返回值内容,UEditor要的返回值需要封装成Json格式
// 转型为MultipartHttpRequest:
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 获得文件:
MultipartFile file = multipartRequest.getFile("upfile"); // UEditor传到后台的是这个upfile,其他的文件上传,应该也差不多是这个,还没去研究,断点一下就知道了
log.info("2");
String OriginalFilename = file.getOriginalFilename();

String fileSuffix = OriginalFilename.substring(OriginalFilename.lastIndexOf(".") + 1).toLowerCase();
log.info("4");
String newname = "";
SimpleDateFormat sf_ = new SimpleDateFormat("yyyyMMddHHmmss");
        String times = sf_.format(new Date());
        newname = times + (int) (Math.random() * (99999 - 10000) + 10000) + "." + fileSuffix;
        // 写入文件
        File imageFile = new File(uploadPath, newname);
        log.info("3");
file.transferTo(imageFile);
log.info("5");
// 现在获取了File接下来要上传到OSS上
if (imageFile != null) {
log.info("6");
  rui = new ReturnUploadImage();
rui.setTitle(imageFile.getName());// 这里需要设置文件名称如:xxx.jpg
  rui.setOriginal(imageFile.getName());// 这里需要设置文件名称如:xxx.jpg
// 判断文件是否为图片文件
// 上传文件(先保存到磁盘,这样对磁盘比较伤,每次上传都要先保存到磁盘,然后再删除)
  log.info("8");
String str = OSSAPPUtil.partUpload(uploadPath + newname, newname);// 这里是自己封装的OSS,上传到OSS上面
log.info("9");
log.info("OSSstr:"+str);
rui.setUrl(str);
rui.setState("SUCCESS");// 这里上传成功的话一定要设置大写的 // SUCCESS,失败还没测试,猜应该是FAIL,回头再去官网找找
// 判断临时存放的文件是否存在
if (imageFile.exists()) {
// 删除临时存放的文件
imageFile.delete();
}
}
log.info("7");
String result = JSON.toJSONString(rui);// 这边就是为了返回给UEditor做的格式转换
log.info("result:"+result);
response.getWriter().write(result);
return null;
}
public class ReturnUploadImage {
private String state;//上传状态SUCCESS 一定要大写
private String url;//上传地址
private String title;//图片名称demo.jpg
private String original;//图片名称demo.jpg
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getOriginal() {
return original;
}
public void setOriginal(String original) {
this.original = original;
}
}


/**
     * 断点续传上传
     *
     * @param fileAbsolutePath
     * @return
     */
    public static String partUpload(String fileAbsolutePath, String fileName) {//, String packageName
    // 设置断点续传请求
    UploadFileRequest uploadFileRequest = new UploadFileRequest(bucket, basePackageName + fileName);
    // 指定上传的本地文件
    uploadFileRequest.setUploadFile(fileAbsolutePath);
    // 指定上传并发线程数
    uploadFileRequest.setTaskNum(8);
    // 指定上传的分片大小
    uploadFileRequest.setPartSize(1 * 1024 * 1024);
    // 开启断点续传
    uploadFileRequest.setEnableCheckpoint(true);
    // 断点续传上传
    ///client.uploadFile(uploadFileRequest);
    try {
            // 断点续传上传
            UploadFileResult uploadResult = client.uploadFile(uploadFileRequest);
            return null != uploadResult ? uploadResult.getMultipartUploadResult().getLocation() : "";


        } catch (Throwable throwable) {
            throwable.printStackTrace();
            return "";
        }
    }


数据库保存url即可




var str = ue.getPlainTxt();
var strImage ="";
if(Number(publishTypeId) == 1){
strImage = str.replace(/<img[^>]+>/g, "");
}else{
strImage = str.replace(/<img[^>]+>/g, "<image>");
}
if(strImage.length > 1000 || strImage.length < 10){
layer.alert("请填写发布内容的字数范围是10~1000!");return;
}
var strContent = ue.getContent();
var strImageContent ="";
if(Number(publishTypeId) == 1){
strImageContent = strContent.replace(/<img[^>]+>/g, "");
}else{
strImageContent = strContent.replace(/<img[^>]+>/g, "<image>");
}


var imageArray = str.match(/<img[^>]+>/g);
var arrry = new Array();
if(imageArray){
for(var i in imageArray){
arrry[i] = $(imageArray[i])[0].src;
}

$.ajax({
type:"POST",
dataType:"json",
url:"${pageContext.request.contextPath}/op/topic/jumpToSavePublish.shtml",
data:{
dataArray : JSON.stringify(arrry),
strImage : strImage,
gameId : gameId,
publishTypeId : publishTypeId,
gameTabName : gameTabName,
customId : customId,
titleId : titleId,
strImageContent : strImageContent
},
success: function(msg){
if(msg.code == "success"){
layer.msg('发布成功!', {icon: 1});
setTimeout('refreshTable()',2000);
}else  {
layer.alert("发布失败!");
}
},             
       error: function () {                    
        layer.alert("发布失败!");
       } 
});

效果:




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

eadela

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值