Integrating image uploads using the ElementUI el-upload component requires a synchronized flow between the frontend and the backend storage service. This guide demonstrates how to upload an avatar to Alibaba Cloud OSS (Object Storage Service) and persist the resulting URL in a database.

Frontend Implementation

The el-upload component utilizes the action attribute to define the target API endpoint. The on-success hook is crucial as it captures the public URL returned by the server after a successful storage operation.

<!-- Avatar Upload Component -->
<el-form-item label="Profile Photo">
  <el-upload
    action="http://localhost:8080/api/oss/upload"
    :on-success="handleUploadSuccess"
    :show-file-list="false">
    <el-button size="small" type="primary">Click to Upload</el-button>
  </el-upload>
</el-form-item>

In the script section, the handleUploadSuccess method updates the local form data with the image link provided by the backend response:

methods: {
  handleUploadSuccess(response) {
    // Assuming the backend returns the URL in a 'data' field
    this.userForm.avatarUrl = response.data;
  }
}

Data Rendering

To display the uploaded image within an el-table, use a scoped slot to inject an <img> tag that references the stored URL.

<el-table-column label="Avatar" width="100">
  <template slot-scope="scope">
    <img :src="scope.row.avatarUrl" alt="Avatar" style="width: 50px; height: 50px; border-radius: 50%;" />
  </template>
</el-table-column>

Backend Controller Logic

The backend receives the file as a MultipartFile. A common pitfall occurs if the parameter name in the controller does not match the name attribute of the ElementUI component (which defaults to file). If these do not match, the backend will receive a null object, leading to 400 or 500 errors.

@RestController
@RequestMapping("/api/oss")
public class StorageController {

    @Autowired
    private CloudStorageService storageService;

    @PostMapping("/upload")
    public ResponseResult uploadImage(MultipartFile file) throws Exception {
        // The parameter name 'file' must match the frontend request key
        String publicUrl = storageService.pushToOSS(file);
        return ResponseResult.success(publicUrl);
    }
}

Alibaba Cloud OSS Integrasion

The service layer handles the connection to Alibaba Cloud. To prevent filename collisions in the bucket, its recommended to generate a unique identifier (UUID) for every uploaded file while preserving the original file extension.

@Service
public class CloudStorageService {

    private final String ENDPOINT = "oss-cn-hangzhou.aliyuncs.com";
    private final String ACCESS_KEY = "your_access_key";
    private final String SECRET_KEY = "your_secret_key";
    private final String BUCKET_NAME = "your_bucket_name";

    public String pushToOSS(MultipartFile multipartFile) throws IOException {
        // Initialize the OSS client
        OSS ossClient = new OSSClientBuilder().build(ENDPOINT, ACCESS_KEY, SECRET_KEY);
        
        try {
            InputStream contentStream = multipartFile.getInputStream();
            String originalName = multipartFile.getOriginalFilename();
            
            // Generate a unique filename using UUID
            String fileExtension = originalName.substring(originalName.lastIndexOf("."));
            String uniqueFileName = UUID.randomUUID().toString() + fileExtension;

            // Upload the file
            ossClient.putObject(BUCKET_NAME, uniqueFileName, contentStream);

            // Construct the public accessibility URL
            // Format: https://bucket-name.endpoint/filename
            return String.format("https://%s.%s/%s", BUCKET_NAME, ENDPOINT, uniqueFileName);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }
}

Key Considerations

• Parameter Naming: Ensure the MultipartFile argument name in your Spring Boot controller matches the name sent by the frontend. In ElementUI, this defaults to file unless customized via the name prop.
• Security: In a production environment, avoid hardcoding credentials. Use environment variables or a configuration server to manage AccessKey and SecretKey.
• CORS: Ensure your Alibaba Cloud OSS bucket has Cross-Origin Resource Sharing (CORS) enabled if the frontend is uploading directly or if the browser needs to fetch the image from a different domain.