Original link: https://www.feidaoboke.com/post/use-abp-blob-storing-manage-file.html
Recently, I am using ABP vNex to write a server background, which involves uploading entity files to the server and supporting the needs of regular operations such as search and deletion.
The first reaction was to use the Controller of .NET Core to implement it by myself, which required writing a lot of operation logic. Later, I realized that I had used the ABP framework to help me realize other business needs. Why not try to see if ABP has a similar class library?
After searching, I found that ABP has a ready-made class library BLOB String. As a mature class library, it is basic to include routine addition, deletion, modification and query operations. I read the official documents. In addition to the support for its own server file management system, It also encapsulates the operation interfaces for cloud vendors such as Azure, AWS, and Alibaba Cloud, and it really can get twice the result with half the effort by using the existing framework.
Let me record my own configuration and usage process. In fact, the official website is better. I wrote an article myself just to deepen the impression. It would be even better if it can help other developers a little bit.
1. Installation dependencies
The reference method here is the same as that of other ABP official class libraries. You can perform installation through abp add-package Volo.Abp.BlobStoring command of ABP CLI, or you can perform visual installation through the nuGet package manager of VS. I am using my own server here, so I also installed Volo.Abp.BlobStoring.FileSystem secondary package. If you want to use the interface of other cloud providers, just install the corresponding package.
In the later use, I found that only the second-level package Volo.Abp.BlobStoring.FileSystem can be installed.
Two, configure the container
This file management class library manages files based on the concept of a container. There can be multiple Containers in a system, just name and configure them.
The method of naming configuration is to create a simple class and configure the name in the attribute named BlobContainerName, for example, to configure a container for storing project pdf.
using Volo.Abp.BlobStoring;
namespace AbpDemo
{
[BlobContainerName("project-pdf")]
public class ProjectPdfContainer
{
}
}
After this configuration, when the file is uploaded to the server, a folder named “project-pdf” will be automatically created on the server to store the file.
Because I use my own server to store files, I also need to configure the root path of the container server. This is injected into the ConfigureServices method of the module file we want to use. The type injected during configuration is the container class name just defined.
Configure<AbpBlobStoringOptions>(options =>
{
options.Containers.Configure<FileBlobContainer>(container =>
{
container.UseFileSystem(fileSystem =>
{
fileSystem.BasePath = "D:\\ProjectFiles";
});
});
});
This configuration method is “powerful” in that it can configure any path on the server, which is much more convenient than deploying it on IIS with the ASP.NET Core Controller self-implementation method, because due to IIS permissions, the program can only be convenient Manage the path under the wwwroot folder carefully, especially in the specific implementation of the delete and download file functions.
3. Realize the service
Several existing interface methods in the framework container class library are sufficient for adding, deleting and downloading functions.
Add
public async Task SaveFileAsync(byte[] bytes)
{
var blobName = "myName";
await _blobContainer.SaveAsync(blobName, bytes);
}
get (download)
public async Task<byte[]> GetFileAsync(blobName)
{
return await _blobContainer. GetAllBytesOrNullAsync(blobName);
}
delete
public async Task<byte[]> GetFileAsync(blobName)
{
return await _blobContainer. DeleteAsync(blobName);
}
These encapsulated methods also support the operation of subfolders. If you want to save a file in a folder, you only need to add the folder name and a slash “ /” in front of the file name blobName of the loading parameter, and the system will automatically Create another folder under “ project-pdf” to store files, and the same is true when obtaining and deleting.
4. Front-end call
My front end is implemented with vue+Element. The upload function uses the el-upload component that comes with Element. When using it, configure the component’s action parameter to be empty, and then disable the auto-upload automatic upload attribute.
Customize a formData variable, assign the raw file selected by the component to the file key of formData, and then call formData as the data parameter of the post request method.
const formData = new FormData()
formData.append('file', this.fileToUpload.raw)
// upload file export function uploadFile(data) {
return request({
url: '/api/app/project-file/upload-file',
method: 'post',
data: data,
})
}
The operation of obtaining the download requires an operation of converting a one-byte stream into a file at the front end. Because the default front-end framework returns json format, and the above ABP BLOB Storing class library returns byte stream blob format, so I encapsulated a request method separately.
import axios from 'axios'
export function downloadFile(config) {
return new Promise((resolve, reject) => {
axios({
url: config.url, // request address method: 'get',
params: config.pa, //The parameters passed to the background, the file name or the path containing the folder responseType: 'blob'// Indicates the data type returned by the server }).then(res => {
resolve(res)
}).catch(err => {
reject(err);
});
});
Use the following method in the method of the vue component to download the file.
downloadFile(pConfig).then(res => {
let blob = new Blob([res.data])
if ('download' in document.createElement('a')) { // not IE browser let url = window.URL.createObjectURL(blob)
let link = document. createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'myName')
document.body.appendChild(link)
link. click()
document.body.removeChild(link) // Remove the element after downloading window.URL.revokeObjectURL(url) // Release the blob object } else { // IE 10+
window.navigator.msSaveBlob(blob,'myName')
}
}).catch(err => {
this.$message.error("Failed to get download file" + err)
})
The core step above is to convert the array given in the background into a blob, and then use window.URL.createObjectURL(blob) to obtain the file download path.
This article is transferred from: https://www.feidaoboke.com/post/use-abp-blob-storing-manage-file.html
This site is only for collection, and the copyright belongs to the original author.