使用阿里云OSS 实现图片上传（前端layui）

最新推荐文章于 2024-04-02 23:15:43 发布
最新推荐文章于 2024-04-02 23:15:43 发布
阅读量3.6k 收藏 6
点赞数 2
分类专栏： layui图片上传 oss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33238562/article/details/106362873
版权

第一步： 导入oss依赖

          <dependency>
			<groupId>com.aliyun.oss</groupId>
			<artifactId>aliyun-sdk-oss</artifactId>
			<version>2.8.3</version>
		</dependency>

 前端HTML：

 <!--************这里是上传图片的代码***************-->
    <div class="layui-form-item">
        <div class="layui-upload">
            <p id="demoText"></p>
            <div class="layui-upload-list" style="width: 50px;height: 100px">
                <img class="layui-upload-img" id="demo1" style="width: auto;height: auto">
            </div>
        </div>
    </div>

前端js:

layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        var uploadInst = upload.render({
               
            // 上传图片的按钮id
            elem: '#importCounterImg'
            ,url: xxxx
            ,accept:'images'
            ,size:50000
            ,before: function(obj){
                obj.preview(function(index, file, result){
                    // 上传成功加载图片
                    $('#demo1').attr('src', result);
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                var demoText = $('#demoText');
                demoText.html('<span style="color: #4cae4c;">上传成功</span>');

                 // 将上传返回的路径值添加到相对应的参数上
                var fileupload = $("#counterImg");
                fileupload.attr("value",res.data.src);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

 

后端controller部分代码：

//图片上传
    @ResponseBody
    @RequestMapping("upload")
    public Map upload(MultipartFile file, HttpServletRequest request) throws Exception{

        String endpoint = "xx";
        String accessKeyId = "xx";
        String accessKeySecret = "xx";
        String bucketName = "xx";
        String default_expire_time = 31536000000L

        String prefix="";
        String dateStr="";
        //保存上传
        OutputStream out = null;
        InputStream fileInput=null;
        try{
            if(file!=null){
                String originalName = file.getOriginalFilename();
                prefix=originalName.substring(originalName.lastIndexOf(".")+1);
                Date date = new Date();
                SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
                dateStr = simpleDateFormat.format(date);
                String filepath = "D:\\down\\images\\" + dateStr+"\\"+originalName+"." + prefix;
                  // 先上传到本地
                File files=new File(filepath);
                if(!files.getParentFile().exists()){
                    files.getParentFile().mkdirs();
                }
                file.transferTo(files);

                DefaultOSSClient client = new DefaultOSSClient(endpoint, accessKeyId, accessKeySecret, bucketName);
                String objectKey = "store/" + System.currentTimeMillis();
                InputStream inputStream = new FileInputStream(new File(filepath));
                URL url = client.simpleUpload(objectKey, inputStream, OssMimeType.JPG, true, client.default_expire_time);

                Map<String,Object> map2=new HashMap<>();
                Map<String,Object> map=new HashMap<>();
                map.put("code",0);
                map.put("msg","");
                map.put("data",map2);
                map2.put("src",url);
                return map;
            }

        }catch (Exception e){
        }finally{
            try {
                if(out!=null){
                    out.close();
                }
                if(fileInput!=null){
                    fileInput.close();
                }
            } catch (IOException e) {
            }
        }
        Map<String,Object> map=new HashMap<>();
        map.put("code",1);
        map.put("msg","");
        return map;
    }

 

工具类OssUtil ：

package cn.com.jala.retailer.manage.util;

import cn.com.jala.retailer.manage.oss.DefaultOSSClient;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

/**
 * @author dzm
 * @date 2019/4/3
 */
@Component
public  class OssUtil {

    @Value("${oss.endpoint}")
    private String endpoint;
    @Value("${oss.accessKeyId}")
    private String accessKeyId;
    @Value("${oss.accessKeySecret}")
    private String accessKeySecret;
    @Value("${oss.bucketName}")
    private String bucketName;

    private DefaultOSSClient defaultOSSClient;

    public DefaultOSSClient getOSSClient() {
        if(defaultOSSClient == null) {
            this.defaultOSSClient = new DefaultOSSClient(endpoint, accessKeyId, accessKeySecret, bucketName);
        }
        return defaultOSSClient;
    }

}

工具类：》DefaultOSSClient 

package cn.com.xx.manage.oss;


import com.aliyun.oss.OSSClient;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.*;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;

import java.io.*;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.Date;

/**
 * @author dzm
 * @date 2019/4/3
 */
@Data
@Slf4j
public class DefaultOSSClient {

    private String endpoint;
    private String accessKeyId;
    private String accessKeySecret;
    private String bucketName;
    public   long default_expire_time = 31536000000L;

    public DefaultOSSClient(String endpoint, String accessKeyId, String accessKeySecret, String bucketName) {
        this.endpoint = endpoint;
        this.accessKeyId = accessKeyId;
        this.accessKeySecret = accessKeySecret;
        this.bucketName = bucketName;
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            if (!ossClient.doesBucketExist(bucketName)) {
                throw new OSSException("您的Bucket " + bucketName +"不存在");
            }
            BucketInfo info = ossClient.getBucketInfo(bucketName);
            System.out.println("Bucket " + bucketName + "的信息如下：");
            System.out.println("\t数据中心：" + info.getBucket().getLocation());
            System.out.println("\t创建时间：" + info.getBucket().getCreationDate());
            System.out.println("\t用户标志：" + info.getBucket().getOwner());
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    public URL generatePresignedUrl(String objectKey) {
        return generatePresignedUrl(objectKey, default_expire_time);
    }

    public URL generatePresignedUrl(String objectKey, long expireTimeMillis) {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            // 生成以GET方法访问的签名URL，访客可以直接通过浏览器访问相关内容。
            return generatePresignedUrl(ossClient, objectKey, expireTimeMillis);
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    private URL generatePresignedUrl(OSSClient ossClient, String objectKey, long expireTimeMillis) {
        URL url = ossClient.generatePresignedUrl(this.bucketName, objectKey, new Date(System.currentTimeMillis() + expireTimeMillis));
        String host = url.getHost();
        if(host.indexOf("-internal.aliyuncs.com") >= 0) {
            host = host.replace("-internal.aliyuncs.com", ".aliyuncs.com");
            try {
                url = new URL(url.getProtocol(), host, url.getPort(), url.getFile());
            } catch (MalformedURLException e) {
                e.printStackTrace();
            }
        }
        return url;
    }

    /**
     * 简单文件上传
     * @param objectKey
     * @param inputStream
     * @param mimeType
     * @param isGenerateUrl
     * @return
     */
    public URL simpleUpload(String objectKey, InputStream inputStream, OssMimeType mimeType, boolean isGenerateUrl) {
        return simpleUpload(objectKey, inputStream, mimeType, isGenerateUrl, default_expire_time);
    }

    public URL simpleUpload(String objectKey, InputStream inputStream, OssMimeType mimeType, boolean isGenerateUrl, long expireTimeMillis) {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            PutObjectRequest request = new PutObjectRequest(this.bucketName, objectKey, inputStream);
            ObjectMetadata metadata = new ObjectMetadata();
            metadata.setContentType(mimeType.getContentType());
            request.setMetadata(metadata);
            PutObjectResult result = ossClient.putObject(request);
//            ossClient.putObject(this.bucketName, objectKey, inputStream);
            if(isGenerateUrl) {
                // 生成以GET方法访问的签名URL，访客可以直接通过浏览器访问相关内容。
                return generatePresignedUrl(ossClient, objectKey, expireTimeMillis);
            }
            return null;
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    public URL simpleUpload(String objectKey, InputStream inputStream, boolean isGenerateUrl) {
        return simpleUpload(objectKey, inputStream, isGenerateUrl, default_expire_time);
    }

    public URL simpleUpload(String objectKey, InputStream inputStream, boolean isGenerateUrl, long expireTimeMillis) {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            ossClient.putObject(this.bucketName, objectKey, inputStream);
            if(isGenerateUrl) {
                // 生成以GET方法访问的签名URL，访客可以直接通过浏览器访问相关内容。
                return generatePresignedUrl(ossClient, objectKey, expireTimeMillis);
            }
            return null;
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    /**
     * 上传本地文件
     * @param objectKey
     * @param file
     */
    public URL simpleUpload(String objectKey, File file, OssMimeType mimeType, boolean isGenerateUrl) {
        return simpleUpload(objectKey, file, mimeType, isGenerateUrl, default_expire_time);
    }

    public URL simpleUpload(String objectKey, File file, OssMimeType mimeType, boolean isGenerateUrl, long expireTimeMillis) {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            PutObjectRequest request = new PutObjectRequest(this.bucketName, objectKey, file);
            ObjectMetadata metadata = new ObjectMetadata();
            metadata.setContentType(mimeType.getContentType());
            request.setMetadata(metadata);
            ossClient.putObject(request);
            if(isGenerateUrl) {
                return generatePresignedUrl(ossClient, objectKey, expireTimeMillis);
            }
            return null;
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    public URL simpleUpload(String objectKey, File file, boolean isGenerateUrl) {
        return simpleUpload(objectKey, file, isGenerateUrl, default_expire_time);
    }

    public URL simpleUpload(String objectKey, File file, boolean isGenerateUrl, long expireTimeMillis) {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            ossClient.putObject(this.bucketName, objectKey, file);
            if(isGenerateUrl) {
                return generatePresignedUrl(ossClient, objectKey, expireTimeMillis);
            }
            return null;
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    /**
     * 断点续传上传。
     * @param objectKey  上传的文件名
     * @param localFilePath  待上传文件的本地路径
     */
    public URL breakpointUpload(String objectKey, String localFilePath, OssMimeType mimeType, boolean isGenerateUrl) throws Throwable {
        return this.breakpointUpload(objectKey, localFilePath, mimeType, isGenerateUrl, 5, 1 * 1024 * 1024);
    }

    /**
     * 断点续传上传。
     * @param objectKey 上传的文件名
     * @param localFilePath 待上传文件的本地路径
     * @param taskNum 上传并发线程数
     * @param partSize 上传的分片大小，范围为100KB~5GB，默认大小为 1024*100=100K
     * @throws Throwable
     */
    public URL breakpointUpload(String objectKey, String localFilePath, OssMimeType mimeType, boolean isGenerateUrl, int taskNum, long partSize) throws Throwable {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            ObjectMetadata meta = new ObjectMetadata();
            // 指定上传的内容类型。
            meta.setContentType(mimeType.getContentType());

            // 通过UploadFileRequest设置多个参数。
            UploadFileRequest uploadFileRequest = new UploadFileRequest(this.bucketName, objectKey);

            // 指定上传的本地文件。
            uploadFileRequest.setUploadFile(localFilePath);
            // 指定上传并发线程数，默认为1。
            uploadFileRequest.setTaskNum(taskNum);
            // 指定上传的分片大小，范围为100KB~5GB，默认为文件大小 1024 * 100 = 100K
            uploadFileRequest.setPartSize(partSize);
            // 开启断点续传，默认关闭。
            uploadFileRequest.setEnableCheckpoint(true);
            // 记录本地分片上传结果的文件。开启断点续传功能时需要设置此参数，上传过程中的进度信息会保存在该文件中，如果某一分片上传失败，再次上传时会根据文件中记录的点继续上传。上传完成后，该文件会被删除。默认与待上传的本地文件同目录，为uploadFile.ucp。
            //uploadFileRequest.setCheckpointFile("<yourCheckpointFile>");
            // 文件的元数据。
            uploadFileRequest.setObjectMetadata(meta);
            // 设置上传成功回调，参数为Callback类型。
            //uploadFileRequest.setCallback("<yourCallbackEvent>");

            // 断点续传上传。
            ossClient.uploadFile(uploadFileRequest);
            if(isGenerateUrl) {
                return generatePresignedUrl(ossClient, objectKey, default_expire_time);
            }
            return null;
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }


    /**
     * 读取文件内容
     * @param objectKey
     * @return
     * @throws IOException
     */
    public StringBuilder readContent(String objectKey) throws IOException {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            OSSObject ossObject = ossClient.getObject(bucketName, objectKey);
            InputStream inputStream = ossObject.getObjectContent();
            StringBuilder objectContent = new StringBuilder();
            BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
            while (true) {
                String line = reader.readLine();
                if (line == null) {
                    break;
                }
                objectContent.append(line);
            }
            inputStream.close();
            return objectContent;
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    /**
     * 下载文件到本地
     * @param objectKey 文件名
     * @param localFilePath 文件下载到本地的路径
     */
    public void downloadFile(String objectKey, String localFilePath) {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            // 下载OSS文件到本地文件。如果指定的本地文件存在会覆盖，不存在则新建。
            ossClient.getObject(new GetObjectRequest(this.bucketName, objectKey), new File(localFilePath));
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    /**
     * 断点续传下载
     * @param objectKey 文件名
     * @param localFilePath 文件下载到本地的路径
     * @return
     * @throws Throwable
     */
    public ObjectMetadata breakpointDownload(String objectKey, String localFilePath) throws Throwable {
        return this.breakpointDownload(objectKey, localFilePath, 5, 1 * 1024 * 1024);
    }

    /**
     * 断点续传下载
     * @param objectKey 文件名
     * @param localFilePath 文件下载到本地的路径
     * @param taskNum 分片下载的并发数
     * @param partSize 分片大小，取值范围为1B~5GB。默认大小为 1024*100=100K
     * @return
     * @throws Throwable
     */
    public ObjectMetadata breakpointDownload(String objectKey, String localFilePath, int taskNum, long partSize) throws Throwable {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            // 下载请求，10个任务并发下载，启动断点续传。
            DownloadFileRequest downloadFileRequest = new DownloadFileRequest(this.bucketName, objectKey);
            downloadFileRequest.setDownloadFile(localFilePath);
            downloadFileRequest.setPartSize(partSize);
            downloadFileRequest.setTaskNum(taskNum);
            downloadFileRequest.setEnableCheckpoint(true);
            // 记录本地分片下载结果的文件。开启断点续传功能时需要设置此参数。下载过程中的进度信息会保存在该文件中，如果某一分片下载失败，再次下载时会根据文件中记录的点继续下载。下载完成后，该文件会被删除。
//            downloadFileRequest.setCheckpointFile("<yourCheckpointFile>");

            // 下载文件。
            DownloadFileResult downloadRes = ossClient.downloadFile(downloadFileRequest);
            // 下载成功时，会返回文件元信息。
            return downloadRes.getObjectMetadata();
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    /**
     * 删除对象
     * @param objectKey
     */
    public void deleteObject(String objectKey) {
        OSSClient ossClient = new OSSClient(this.endpoint, this.accessKeyId, this.accessKeySecret);
        try {
            // 下载OSS文件到本地文件。如果指定的本地文件存在会覆盖，不存在则新建。
            ossClient.deleteObject(this.bucketName, objectKey);
            log.info("删除 bucketName:" + this.bucketName + ", objectKey:" + objectKey);
        } catch (Exception e) {
            throw new OssClientException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

    public static void main(String[] args) throws Exception{
        String endpoint = "xx";
        String accessKeyId = "xx";
        String accessKeySecret = "xx";
        String bucketName = "xx";

        DefaultOSSClient client = new DefaultOSSClient(endpoint, accessKeyId, accessKeySecret, bucketName);
        String objectKey = "test/" + System.currentTimeMillis();
        InputStream inputStream = new FileInputStream(new File("D:\\down\\images\\2020-05-24\\123.png"));
        URL url = client.simpleUpload(objectKey, inputStream, OssMimeType.JPG, true, client.default_expire_time);

    }

}

工具类：》OssClientException 

package cn.com.xxx.manage.oss;

/**
 * @author dzm
 * @date 2019/4/15
 */
public class OssClientException extends RuntimeException {
    public OssClientException() {
        super();
    }

    public OssClientException(String message) {
        super(message);
    }

    public OssClientException(String message, Throwable cause) {
        super(message, cause);
    }

    public OssClientException(Throwable cause) {
        super(cause);
    }

    protected OssClientException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {
        super(message, cause, enableSuppression, writableStackTrace);
    }
}

 

工具类：》OssMimeType 

package cn.com.xxx.manage.oss;

/**
 * OSS文件类型，详见：https://help.aliyun.com/knowledge_detail/39522.html
 * @author dzm
 * @date 2019/4/15
 */
public enum OssMimeType {

    /**
     * 二进制流，未知的文件类型
     */
    BYTE("application/octet-stream"),

    /**
     * 文件后缀为 .jpeg  .jpg  .jpe
     */
    JPG("image/jpeg"),

    /**
     * 动图格式文件
     */
    GIF("image/gif"),

    HTML("text/html"),

    TXT("text/plain"),

    DOC("application/msword")

    ;

    private String contentType;

    OssMimeType(String contentType) {
        this.contentType = contentType;
    }

    public String getContentType() {
        return contentType;
    }

    public void setContentType(String contentType) {
        this.contentType = contentType;
    }
}

 

。度
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
qiucodeBlog:一个基于Springboot2.x的个人博客,ORM框架使用的是Mybatis，前端渲染模板引擎使用的是Freemarker，前端UI框架使用的是Layui，数据库使用的是Mysql5.6.x，图片存储在阿里云OSS上，全文搜索引擎使用Luncene
05-14
qiucodeBlog 介绍 一个基于Springboot2.x的个人博客,ORM框架使用的是Mybatis，前端渲染模板引擎使用的是Freemarker，前端UI框架使用的是Layui，数据库使用的是Mysql5.6.x，图片存储在阿里云OSS上，全文搜索引擎使用Luncene。鄙人小站： 微信搜索： qiucode 或直接扫码 关注笔者的公众号 首页 文章详情页 时间轴 网站留言 后台登录 账号 admin 密码 123456 （别想多了，这是部署到你本地数据库的数据初始值，笔者的站点可不是这个密码哟） 发布文章 软件架构 后端方面概览 JDK版本： jdk1.7+ 后端框架： Springboot2.x Mybatis 模板渲染框架： Freemarker 数据库： Mysql5.6.x 全文搜索引擎： Luncene 图片存储OSS: 阿里云OSS 前端方面概览 界面UI: L
【layui】阿里云OSS上传插件 aliossUploader [视频上传]
Minions_Fatman的博客
06-09 757
【layui】阿里云OSS上传插件 aliossUploader [视频上传]
什么是对象存储OSS?怎么利用OSS实现文件上传？
最新发布
qq_56999608的博客
04-02 1012
本篇将带你快速了解并使用阿里云OSS实现图片文件的上传。一、概述阿里云是阿里巴巴集团旗下全球领先的云计算公司，也是国内最大的云服务提供商；提供多种云产品和解决方案，覆盖计算、存储、网络、安全、数据库、大数据、人工智能等领域。阿里云对象存储OSS (Object Storage Service)，是一款海量、安全、低成本、高可靠的云存储服务。使用OSS，您可以通过网络随时存储和调用包括文本、图片、音...
layui 上传组件调用 OSS
风起未来
04-26 921
详细参照官网组件 https://fly.layui.com/extend/aliossUploader/ aliossUploader.render({ elm:'#uploadId', region:'oss-cn-shanghai', layerArea:['800px','500px'], policyUrl:'/oss/getSignUtil', policyData:{ //访问接口需要传的参数（我这传的是需要上传的路径） ..
Layui上传多张图片（多选+删除+预览），后台代码，oss上传
weixin_44422857的博客
01-14 4815
1.前端layui + 后端ssm 效果图： 1.前端页面 jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String path = request.getContextPath(); String basePath = request.get
layui大文件分成很多小文件上传Oss
weixin_45960743的博客
08-02 548
对于很大的文件比如几百M的音频视频 软件上传，如果直接上传 服务器，经常处理不了。 可以利用layui，在客户端先把大文件切割成小文件 一个一个上传，然后服务器端，再组合成一个大文件。 服务端代码 public function bigUpload(Request $request) { $params = $request->param(); $status = 1; $fname = sprintf('tmp/%s.%s', $param.
阿里云OSS图片的上传与展示:案例
weixin_52591234的博客
04-10 2541
src="'https://【Bucket名称】.oss-cn-beijing.aliyuncs.com/'+scope.row.img"endpoint ， accessKeyId ， accessKeySecret ，bucketName根据自己的OSS信息填写。通过图片的绝对路径上传，但是浏览器为了安全考虑，无法获得本地图片的绝对路径【也可以，但没必要】第一：uploadHttpRequest() 覆盖默认的上传行为，可以自定义上传的实现。第二：图片转为Base64格式解决图片的跨域问题，加上。
前端上传图片到阿里云oss服务器(简单上传和分片上传)
applebadm的博客
03-18 4823
前端上传图片到阿里云oss服务器(简单上传和分片上传)
页面（前端）直传oss（layui.js 不走后端）
xiao_mao_xiao_yu的博客
12-19 1586
一、什么叫页面（前端）直传oss？ 文件（jpg，png，tif.....）上传，无非两种情况：一种走后端处理，再上传oss；还有就是今天要说的页面直接上传oss！ 二、准备工作 算了还是直接上代码吧！ 1、前端js代码 /** * @remark 原File上传函数 * @Time 19-8-23 15:23 ...
Layui+cropper实现图片裁剪并上传到阿里云OSS
xiadiganhuo的博客
04-26 819
实现效果： Html: <div class="layui-form-item"> <label class="layui-form-label">图片</label> <div class="layui-input-block" style="width: 600px"> <input type="hidden" name="photo" value=""> &l
layui-阿里云oss上传
天涯倦客的博客
09-29 2865
前端html和js //这个是使用到的layui文件列表上传(多文件上传) <div class="layui-upload" style="margin-left:10px; margin-right:3px"> <button type="button" class="layui-btn layui-btn-normal" id="testList"&g...
阿里云ossjava源码-feiqu-opensource:飞趣社区做了快两年了，最近也想不到什么新功能去做了，于是想起了开源的事情，我一个人
06-06
这个项目使用了hutool工具类作支撑，页面ui使用了layui，集成了阿里云oss、七牛云，支持自动代码生成，减去了70%的工作量，让你更多的精力放在写业务代码的过程中， 当然这个项目还可以用来给你们公司做前端展示页面...
人工智能-项目实践-搜索引擎-一个基于Springboot2.x的个人博客,ORM框架使用的是Mybatis，前端渲染模板引擎使
02-26
一个基于Springboot2.x的个人博客,ORM框架使用的是Mybatis，前端渲染模板引擎使用的是Freemarker，前端UI框架使用的是Layui，数据库使用的是Mysql5.6.x，图片存储在阿里云OSS上，全文搜索引擎使用Luncene。
基于 SpringBoot2.x + MyBatisPlus + MySQL + Shiro+ Layui构建的高效文件管理系统
06-15
本资源基于 SpringBoot2.x + MyBatisPlus + MySQL + Shiro+ Layui 等搭配七牛云，阿里云OSS实现的云存储管理系统。包含文件上传、删除、预览、云资源列表查询、下载、文件移动、重命名、目录管理、登录、注册、以及...
基于SpringBoot+MySQL的旅游网站设计与实现.zip
05-18
8、额外功能：阿里云短信服务 SMS、阿里云图片存储 OSS、QQ 邮箱验证服务 9、主要算法：Twitter 雪花算法（ID 生成策略）、Bcrypt（密码加密）、JPA 排序、推荐算法 详细介绍参考：...
阿里云oss开发与使用（一）
weixin_46444914的博客
10-14 3050
oss
基于阿里云 大文件分片上传（oss + layui + js版本）：
masterphp的博客
08-24 1002
基于阿里云 大文件分片上传（oss + layui + js版本）：
vue 在页面中使用阿里云oss网络图片，解决图片不显示的问题
Suger的博客
02-27 4671
vue 在页面中使用阿里云oss网络图片，解决图片不显示的问题
【开发环境】（阿里云分布式文件系统）对象存储OSS 服务配置
范同学的学习历程
09-16 3603
Learning Path 指导您快速了解 OSS，学习相关的基础操作，并利用丰富的 API SDK 包和便捷工具进行二次开发。生成的记录中就包含了 ID 和 密钥，注意密钥只有在第一次创建时能在页面中查看，所以需要复制进行保存，刷新页面之后，密钥会自动消失。OSS阿里云_ OSS是什么意思_对象储存OSS_阿里云OSS学习路径图_OSS Learning Path - 阿里云。文件上传完毕，进入文件管理中查看文件的详细信息，可通过文件详情信息中的链接访问文件。进入到 OSS 对象存储的管理平台。
如何实现阿里云oss前端直传
04-25
阿里云oss前端直传可以通过以下步骤实现: 1. 前端生成上传凭证：使用阿里云oss的SDK生成上传凭证，其中包含AccessKeyId、AccessKeySecret、SecurityToken和Bucket等信息。 2. 前端设置上传参数：前端根据上传凭证...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值