一步教会你如何上传资源到云服务器

我使用的是Ucloud，没有账号请先去注册

下面是封装好的方法

@Data
public class FileDtos {

    private  Integer success;
    private  String message;
    private  String  url;
}

Ucloud上传成功会返回这状态吗（0：1？失败：成功），url是当前资源的在线地址，如果是图片直接引用即可

package com.jmc.upload_image;

import cn.ucloud.ufile.UfileClient;
import cn.ucloud.ufile.api.object.ObjectConfig;
import cn.ucloud.ufile.auth.ObjectAuthorization;
import cn.ucloud.ufile.auth.UfileObjectLocalAuthorization;
import cn.ucloud.ufile.bean.PutObjectResultBean;
import cn.ucloud.ufile.exception.UfileClientException;
import cn.ucloud.ufile.exception.UfileServerException;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import java.io.InputStream;
import java.util.UUID;

@Service
public class UcloudProvider {
    @Value("TOKEN_f2aaf18e-9cfc-4527-9a68-81aba02297ec")
    private  String publicKey;
    @Value("ae7f7bb9-a751-40f1-bef7-cfb02429b7dd")
    private  String privatekey;
    @Value("mashuai")
    private  String backetName;
    @Value("cn-bj")
    private  String region;
    @Value("ufileos.com")
    private  String suffix;
    @Value("518400000")
    private  Integer  expirse;
    //放入自己密钥
    public  String  uploads(InputStream fileStream,String miedType,String fileName){
        //防止同一个用户上传图片重复
        String genrateFileName="";
        String[] filePath = fileName.split("\\.");
        if(filePath.length>1){
            genrateFileName= UUID.randomUUID().toString()+"."+filePath[filePath.length-1];
        }else {
            return  null;//图片有问题.
        }
        try {
            ObjectAuthorization objectAuthorization = new UfileObjectLocalAuthorization(publicKey, privatekey);
            ObjectConfig config = new ObjectConfig(region, suffix);//填上地区，
            PutObjectResultBean response = UfileClient.object(objectAuthorization, config)
                    .putObject(fileStream, miedType)
                    .nameAs(genrateFileName)
                    .toBucket(backetName)

                    .setOnProgressListener((bytesWritten, contentLength) -> {
                    })
                    .execute();
            if(response!=null && response.getRetCode()==0){
                String url=UfileClient.object(objectAuthorization,config)
                        .getDownloadUrlFromPrivateBucket(genrateFileName,backetName,expirse)
                        .createUrl(); //将上传到的文件夹，过期时间设置好
                return url;
            }
        } catch (UfileClientException e) {
            e.printStackTrace();
            return null;
        } catch (UfileServerException e) {
            e.printStackTrace();
            return null;
        }

        return  genrateFileName;//当前图片名字
    }

}

上面是一个封装好的Ucloud 通过SDk上传资源的代码

package com.jmc.upload_image;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import java.io.IOException;

@Controller
public class FileController {
    @Autowired
    private UcloudProvider ucloudProvider;

    @ResponseBody
    @RequestMapping("/file/{action}")
    public FileDtos upload(HttpServletRequest request,@PathVariable(name = "action") String action){

        System.out.println("action:"+action);
        if (action.equals("upload")){
            try {
                MultipartHttpServletRequest multipartHttpServletRequest=(MultipartHttpServletRequest) request;
                MultipartFile file = multipartHttpServletRequest.getFile("editormd-image-file");
                String filename= ucloudProvider.uploads(file.getInputStream(), file.getContentType(), file.getOriginalFilename());
                FileDtos fileDtos = new FileDtos();
                fileDtos.setMessage("成功");
                fileDtos.setUrl(filename);
                fileDtos.setSuccess(1);
                System.err.println("对象："+fileDtos);
                return fileDtos;

            }catch (IOException e){
                e.printStackTrace();
            }

        }
    /*    //上传头像。执行插入操作
        if(action.equals("head")){
            try {
                MultipartHttpServletRequest multipartHttpServletRequest=(MultipartHttpServletRequest) request;
                MultipartFile file = multipartHttpServletRequest.getFile("editormd-image-file");
                String filename= ucloudProvider.uploads(file.getInputStream(), file.getContentType(), file.getOriginalFilename());
                FileDtos fileDtos = new FileDtos();
                fileDtos.setMessage("成功");
                fileDtos.setUrl(filename);
                fileDtos.setSuccess(1);
                //插入图片；
                Users users= (Users) request.getSession().getAttribute("user");
                int id=users.getId();
                System.err.println("用户id:"+id+"-图片："+filename);

                userMapper.updateAvatarul(id,filename);

                return fileDtos;

            }catch (IOException e){
                e.printStackTrace();
            }

        }*/


        return  null;
    }
}

以上是后台的方法，接下来前端只需要保证input 的id name与我的一样即可
附赠一个美化默认的input type=file的方法

.file-head {
    position: relative;
    width: 80px;
    height: 30px;
    background: url('../images/chang_head.PNG  ') center center no-repeat;
    background-size: 100%;
}
.file-head input {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    opacity: 0;
}

	<div class="file-head">
		<input type="file" name="editormd-image-file"  id="file2" 			onchange="updateHead(this)">
			</div>

接下来就是发送ajax请求的

function updateHead(e) {
    var userId=$(".cruuentuserId").attr("id");//当前用户的id;//当用户的id
    var form = new FormData();
    form.append("editormd-image-file", document.getElementById("file2").files[0]);
    $.ajax({
        url: "http://api.recruit.com/api/communtiy/file/upload",    //后台url
        data: form,
        cache: false,
        async: false,
        type: "POST",          //类型，POST或者GET
        dataType: 'json',       //数据返回类型，可以是xml、json等
        processData: false,
        contentType: false,
        success: function (data) {   //成功，回调函数
            if(data.success==1){
                //发送插入请求
                //这个地方，根据需求觉得，我写ajax请求，是因为我那个上传方法很多地方需要用到，为了方便，我直接接受返回的路径
                $.post("http://api.recruit.com/api/communtiy/updateHead",{
                    "userId":userId,
                    "image_url":data.url
                },function (data) {
                    $("#update_image").empty();
                    $("#update_image").prepend("<img src='"+data.avatarUrl+"'alt=''>")
                });
            }
        },

    });