最重要一點要在CentOS的docker中進行续语,macOS會有很多問題舔示。
1.拉取鏡像
docker pull qbanxiaoli/fastdfs
2.運行鏡像
docker run -d --privileged=true --net=host --name=fastdfs -e IP=172.16.200.168 -e WEB_PORT=80 -v /root/docker/fastdfs:/var/local/fdfs qbanxiaoli/fastdfs
其中172.16.200.168改為宿主機CentOS的IP
/root/docker/fastdfs改為宿主機上的存在的目錄
3.docker中測試上傳
A.進入docker:
docker exec -it fastdfs /bin/bash
B.創(chuàng)建文件
echo "Hello FastDFS!">index.html
C.fastdfs自帶命令上傳
fdfs_test /etc/fdfs/client.conf upload index.html
D.上傳成功返回地址輸入瀏覽器即可
http://172.16.200.168/group1/M00/00/00/rBDIqF0Z112AYqC-AAAADyBAGsI06_big.html
E.如果無法訪問172.16.200.168機器可以把防火墻關(guān)閉再訪問
4.SpringBoot中使用代碼實現(xiàn)
A.依賴
<dependency>
<groupId>com.github.tobato</groupId>
<artifactId>fastdfs-client</artifactId>
<version>1.26.4</version>
</dependency>
B.配置
#FastDfs
fdfs.so-timeout=1500
fdfs.connect-timeout=6000
fdfs.tracker-list=172.16.200.168:22122
fdfs.pool.jmx-enabled=false
fastDfs.host=http://172.16.200.168/
fdfs.thumb_image.width = 150
fdfs.thumb_image.height = 150
其中172.16.200.168為docker宿主機的地址缩多,有可能是在虛擬機中
C.啟動類
加上注解
@Import(FdfsClientConfig.class)
D.使用
后臺
@Service
public class PictureService {
@Autowired
private FastFileStorageClient fileStorageClient;
@Value("${fastDfs.host}")
private String hostIp;
public String uploadPic(MultipartFile file) {
try {
StorePath storePath = fileStorageClient.uploadFile(
file.getInputStream(),
file.getSize(),
FilenameUtils.getExtension(file.getOriginalFilename()), null);
String fileUrl = hostIp + storePath.getFullPath();
return fileUrl;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
@PostMapping("/testUpload")
public Result<String> testUpload(@RequestBody MultipartFile file) {
String url = pictureService.uploadPic(file);
return new Result<>(true, StatusCode.OK, "成功", url);
}
E.前端實現(xiàn)
ElementUI的el-upload組件
<el-upload
action="http://localhost:9011/goods/testUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">點擊上傳</el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png文件碍拆,且不超過500kb</div>
</el-upload>
數(shù)據(jù)結(jié)構(gòu)
fileList: [
{
name: 'food.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
},
{
name: 'food2.jpeg',
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}
],