互联网上已经有一些运行良好的图床了，比如SM。https://sm.ms/,图克https://imgkr.com和https://imgchr.com/,女士那么，我们为什么要建立自己的图表床呢？一是码农总喜欢折腾，二是自己存储图表数据比较安全。那我们接下来开始吧。下面是演示的地址，大家可以先看看建设完成后的效果。https://xiaotuwo.github.io，点击按钮上传图片，然后可以复制链接下载。
准备前端环境
安装节点
去nodejs官网下载，我们主要用npm工具。
安装淘宝图片。如果是在国内，下载镜像非常慢，所以使用国内：sudonpminstall-gcn pmregistry=https://registry.npm.taobao.org的镜像。
安装vue-cli工具，因为我们前端用的是vue，所以需要安装Vue-CLI: cnpminstall-g @ vue/CLI。
创建一个项目：vuecreatexiaotuwo
添加antd依赖：cnpminstallant-design-vue-save vue-save。
启动：cdxiaotuwonpm和runserve
访问，能够访问HelloWorld页面表明我们的环境已经准备成功。http://本地主机：8080
写前端代码
至此，我们的基础环境已经搭建完毕，下面开始写前端代码。我们使用sm.ms作为原型来构建它。如下图，我们只编辑他的头部，上传部分和尾部。
成品形式如下。sm.ms拖拽上传图片的交互设计改为点击上传图片，但是如果你想拖拽的话还是很简单的。这里是antd的风格，换个标签就行了。https://www.antdv.com/components/upload-cn/
头标和尾标代码都很简单，我们只解释上传部分代码。设置好vue框架后，去上面提供的antd网站找到上传控件，直接点击复制自己喜欢的代码样式，粘贴到content/index.vue中，然后将a-upload的动作修改为自己的服务器地址。本地测试是http://localhost:8887/API/images/upload，下面也有支持的服务器代码。
vue的语法不具体展开，主要说明一个地方。在handlePreview方法中，我增加了一个复制链接的逻辑，可以在点击预览时轻松复制图片链接，方便把网址放在其他地方使用。
他的。$message.success(\ '复制图片链接成功\ ')；
document . addevent listener(' copy 'functioncopyCall(e){
预防默认()
e . clipboard data . setdata(' text/html 'file.preview)
e . clipboard data . setdata(' text/plain 'file.preview)
document . removeeventlistener(' copy 'copyCall)
})
至此，前端基本构建完成，可以直接查看源代码了，https://github.com/xiaotuwo/xiaotuwo-client.
服务器端环境准备
本文使用UCloud对象存储产品US3来构建图床。目前US3每个月有20G的免费存储和20G的免费流量，足够自用和启动。
复制下面的链接，访问浏览器查看US3官网。你需要第一次注册，和https://urlify.cn/YNNBNn.注册后，进入控制台创建US3空间。
进入空间后，填写存储名称，私人空间和公共空间均可。我创造了xiaotuwo.cn-bj.ufileos.com作为备份。
在US3控制台中创建令牌，主要用于上传和删除图片。
选择您刚刚创建的空间，设置年龄，然后单击确定。记得检查令牌的权限。
单击finish获取公钥和私钥，并复制它们以备后用。
编写服务器代码
服务器代码主要分为三个部分。
1.接收请求的控制器
2.上传图片到US3的逻辑
3.返回到内容处理
1.编写控制器。
使用MultipartHttpServletRequest接收前端文件，调用uCloudProvider上传。
@ post mapping({ '/API/files/upload ' })
@ResponseBody
publicFileDTOupload(http servlet request request){
FileDTOresultFileDTO=newFileDTO()；
multiparthttpservlet request multipart request=(multiparthttpservlet request)请求；
multipart file file=multipart request . getfile(' file ')；
长启动=系统。当前时间毫秒()；
尝试{
if(file==null){
结果文件。设置状态(“错误”)；
}
FileDTOfileDTO=ucloudprovider。uploadwithexpired(文件。getinputstream()、file.getContentType()、objects。要求非空(文件。getoriginalfilename())；
日志。info(' UPLOAD _ FILE _ EXPIRED | IP:{ } | referer:{ } | URL:{ } | cost:{ } 'getIpAddress(request)，request.getHeader('referer ')，fileDTO.getUrl()，system。当前时间毫秒()-开始)；
执行服务。submit(newUCloudScanner(filedo，uCloudProvider，executorService，1))；
结果文件。setname(filedo。getname())；
结果文件。seturl(filedo。geturl())；
结果文件。setthumburl(filedo。geturl())；
结果文件。设置状态(“完成”)；
} catch(例外一){
log.error('UPLOAD_FILE_ERROR 'e)；
结果文件。设置状态(“错误”)；
}
returnresultFileDTO
}
2、上传图片到US3的逻辑
上传US3主要是一些配置文件，我直接使用的专家的过滤器处理，配置文件在pom.xml里面，编译的时候写入应用程序。属性
iddev/id
性能
server.port8887/server.port
ucloud.ufile.public-key你的公钥/ucloud.ufile.public-key
ucloud.ufile.private-key你的私钥/ucloud.ufile.private-key
ucloud。ufile。上传-域-私有你的水桶名字。cn-bj.ufileos.com/ucloud.ufile.upload-domain-private
ucloud。ufile。下载-域-私有你的水桶名字。cn-bj.ufileos.com/ucloud.ufile.download-domain-private
ucloud。uai传感器。公开密钥鉴黄公钥/ucloud。uai传感器。公开密钥
ucloud。uai传感器。私人密钥鉴黄私钥/ucloud。uai传感器。私人密钥
ucloud。uai传感器。资源id鉴黄ID/ucloud。uai传感器。资源id
ucloud。uai传感器。URL http://API。uai。ucloud。cn/v1/image/scan/ucloud。uai传感器。统一资源定位器
/属性
激活
activeByDefaulttrue/activeByDefault
/激活
我们会发现配置文件里面除了文件的配置还有一套鉴黄的配置，对的这个地方不是本文的重点，但是图床一定要有鉴黄的能力，具体的实现可以参考文章通过UCloud AI内容审核子宫活动间期检查员免费搭建鉴黄平台教程
具体US3的逻辑代码也是非常的简单，主要的逻辑就是上传，使用私钥和时间戳生成链接，显示。
publicFileDTOupload(inputstream filestream，StringmimeType，StringfileName){
StringgeneratedFileName
string[]文件路径=文件名。拆分(' \ \ \ \ . ');
if(filePaths.length1){
生成的文件名=uuid。随机uuid().toString()“”。文件路径[文件路径。长度-1]；
}否则{
thrownewErrorCodeException(错误代码.文件_上传_失败);
}
长启动=系统。当前时间毫秒()；
尝试{
日志。调试(' UCloudProviderstartuploadfile，文件名：{},时间：{} '文件名，新日期());
ObjectAuthorizationobjectAuthorization=newufileobjectlocaldauthorization(公钥，私钥)；
ObjectConfigconfig=新对象配置(uploadDomainPrivate)；
PutObjectResultBeanresponse=ufileclient。对象(对象授权，配置)。putObject(fileStream，mimeType)。nameAs(generatedFileName)。toBucket(bucketNamePrivate)。setOnProgressListener((写入的字节数，内容长度)-{
})。执行();
日志。调试(' UCloudProviderenduploadfile，文件名：{},时间：{},开销：{} '文件名，新日期()，系统。当前时间毫秒()-开始)；
如果（回应！=nullresponse。getretcode()==0){
长启动2=系统。当前时间毫秒()；
日志。调试(' UCloudProviderstartgeturl，文件名：{},时间：{} '文件名，新日期());
字符串URL=ufile客户端。对象(对象授权，新对象配置(downloadDomainPrivate))。getdownloadurlfromprivatebutter(生成的文件名，bucketNamePrivate，24*60*60)。创建URL()；
日志。调试(' UCloudProviderendgeturl，文件名：{},时间：{},开销：{} '文件名，新日期()，系统。当前时间毫秒()-开始2)；
FileDTOfileDTO=newFileDTO()；
文件dto。seturl(URL。replace(' http '' https ')；
菲莱多。setname(生成的文件名)；
returnfileDTO
}否则{
日志。调试(' UCloudProviderenduploadfile，文件名：{},时间：{},开销：{} '文件名，新日期()，系统。当前时间毫秒()-开始)；
log.error('uploaderror，{} 'response)；
thrownewErrorCodeException(错误代码.文件_上传_失败);
}
} catch(UfileClientException | UfileServerExceptione){
log . debug(' UCloudProviderenduploadfile，文件名：{}，时间：{}，开销：{} '文件名，新日期()，system . current time millis()-start)；
log.error('uploaderror，{} '文件名，e)；
thrownewErrorCodeException(error code。文件_上传_失败)；
}
}
3.回到内容处理，这里也需要注意。为了配合antd的上传控制，我们的dto如下。
@数据
publicclassFileDTO {
privateStringname
privateStringstatus
privateStringurl
privateStringthumbUrl
}
服务器端源代码访问
https://github.com/xiaotuwo/xiaotuwo-server
都在这里了，你学会了吗？如果你有任何问题，你可以在US3自己的官方论坛问https://uclub.ucloud.cn/invite/93。
西部数码代理(chenqinet.cn)是工信部批准的正规老牌云服务商，拥有ISP、云牌照、IDC、CDN全业务资质。自成立以来，二十多年来一直专注于域名注册，虚拟主机，云服务器，企业邮箱，企业网站建立等互联网基础服务！
公司开发的云计算平台以便捷、高效、高性价比、意想不到的售后优势占领市场，跻身国内前三的接入服务商，为国内超过50万家网站提供高速稳定的托管服务！先后荣获中国高新技术企业、中国优秀云计算服务商、中国十大IDC企业、中国最受欢迎云服务商等称号！
目前西部数码代理高性能云服务器在售，最低仅售48元！
http://zhuji.chenqinet.cn/cloudhost/
国内的vps