OSS存储图片

1,html的form表单

<form action="/oss" id="oss">
        <input type="hidden" name="UPhoto1" id="headImg">
        <input type="file" name="mfile1" id="upload"
               accept="image/*" class="input-file"  			multiple="multiple">
    </form>

2,JavaScript
当图片选择器改变时触发post请求,提交图片返回url

 $("#upload").change(function() {
            upload_files2();
        });

        function upload_files2() {
            var formData =new FormData();
            formData.append('file', $('#upload')[0].files[0]);
            $.ajax({
                url: "/oss/uploadFiles",
                type:'POST',
                data: formData,
                async:false,
                cache:false,
                contentType:false,
                processData:false,
                success:function (data) {
                    if (data.success){
                        //$("#headImg").val(data.msg);
                        alert("成功了!" + data.msg);
                    }else {
                        alert("失败了!" + data.msg);
                    }
                },
                error:function (data) {
                    alert("失败了!" + data.msg);
                }

            });

        }

3,controller接受请求和图片

@Controller
@CrossOrigin
@RequestMapping("/oss")
public class OSSController extends BaseController {
    @Autowired
    private OssServiceImpl ossServiceImpl;
    @PostMapping("/uploadFiles")
    @ResponseBody
    public AjaxResult uploadFiles(@RequestParam(value ="file") MultipartFile file){
        String url = ossServiceImpl.uploadImg(file);
        return AjaxResult.me(true,url);
    }
}

4service层,上传图片到阿里云oss,其中参数都放在OSSConfig配置类中

	 private OSS getConnect() {
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(OSSConfig.ENDPOINT, OSSConfig.ACCESSKEYID,
                OSSConfig.ACCESSKEYSECRET);
        return ossClient;
    }
    private void closeConnect(OSS ossClient) {
        ossClient.shutdown();
    }
    @Override
    public String uploadImg(MultipartFile file) {
        OSS connect = null;
        try {
            InputStream inputStream = file.getInputStream();
            connect = getConnect();

            //生成文件名
            String filePath = DateUtil.getTodayStr2();
            String fileName = UUID.randomUUID().toString().replace("-","")+file.getOriginalFilename();


            PutObjectResult result = connect.putObject(OSSConfig.BUCKETNAME,
                    filePath+"/"+fileName,    // 上传的路径和名称
                    inputStream);
            String url = "https://"+OSSConfig.BUCKETNAME
                    +"."+OSSConfig.ENDPOINT+"/"+filePath+"/"+file.getOriginalFilename();
            return url;
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            closeConnect(connect);
        }
        return null;
    }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值