“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

preface

About Ali Cloud OSS I will not do too much introduction, want to know the small partner click the link below

Ali Cloud object storage OSS address

Ali Cloud object storage OSS development document address

1. Import OSS dependencies

<! -- Ali Cloud OSS-->
 <dependency>
     <groupId>com.aliyun.oss</groupId>
     <artifactId>aliyun-sdk-oss</artifactId>
     <version>3.10.2</version>
 </dependency>

 <! -- Date toolbar dependent -->
 <dependency>
     <groupId>joda-time</groupId>
     <artifactId>joda-time</artifactId>
     <version>2.9.3</version>
 </dependency>
Copy the code

2. Configure the configuration file

== Enter ali Cloud console (mouse can be seen on the head) ==

= = the endpoint: = =

3. Back-end code

==controller==

@RestController
@RequestMapping("/oss")
public class OssController {

    @Autowired
    private OssService ossService;

    // How to upload an image
    @PostMapping("policy/uploadAvator")
    public Result uploadOssFile(@RequestParam("file") MultipartFile file,
                                @RequestParam("module") String module) {
        // Obtain the uploaded MultipartFile
        InputStream inputStream = null;
        try {
            inputStream = file.getInputStream();
        } catch (IOException e) {
            e.printStackTrace();
        }
        String url = ossService.uploadFileAvatar(inputStream,module,file.getOriginalFilename());

        return Result.success("File uploaded successfully",url); }}Copy the code

OssService

public interface OssService {
    String uploadFileAvatar(InputStream inputStream, String module, String originalFilename);
}
Copy the code

OssServiceImpl

@Service
public class OssServiceImpl implements OssService {

    @Override
    public String uploadFileAvatar(InputStream inputStream,String module,String originalFilename) {
        // The utility class gets the value
        String endpoint = ConstantPropertiesUtils.END_POINT;
        String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;


        // Create an OSS instance
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        String folder = new DateTime().toString("yyyy/MM/dd");
        String fileName = UUID.randomUUID().toString();
        String fileExtension = originalFilename.substring(originalFilename.lastIndexOf("."));
        // Folder name in OSS
        String objectName = module + "/" + folder + "/" + fileName + fileExtension;

        // Create the meta information of the uploaded file. You can set the HTTP header with the meta information of the uploaded file.
        // If you do not set, directly access the URL will download the image itself, see you choose
        ObjectMetadata objectMetadata = new ObjectMetadata();
        objectMetadata.setContentType("image/jpg");

        ossClient.putObject(bucketName, objectName, inputStream,objectMetadata);

        // Disable OSSClient.
        ossClient.shutdown();

        String url = "http://"+bucketName+"."+endpoint+"/"+objectName;
        returnurl; }}Copy the code

== The tool class obtains the value in the configuration file ==

@Component
public class ConstantPropertiesUtils implements InitializingBean {

    // Read the configuration
    @Value("${aliyun.oss.file.endpoint}")
    private String endpoint;

    @Value("${aliyun.oss.file.keyid}")
    private String keyid;

    @Value("${aliyun.oss.file.keysecret}")
    private String keysecret;

    @Value("${aliyun.oss.file.bucketname}")
    private String bucketname;


    // Define the exposed static constants
    public static String END_POINT;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;

    @Override
    public void afterPropertiesSet(a) throws Exception { END_POINT = endpoint; ACCESS_KEY_ID = keyid; ACCESS_KEY_SECRET = keysecret; BUCKET_NAME = bucketname; }}Copy the code

4. Front-end code

Uploading component Code

  //action="https://jsonplaceholder.typicode.com/posts/"
 <el-upload
  class="avatar-uploader"
  action="Upload Address"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="tableData.avator" :src="tableData.avator" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
Copy the code

The callback function

HandleAvatarSuccess (res, file) {this.$message. Success(" Image modified successfully! "); ) this.imageUrl = URL.createObjectURL(file.raw); BeforeAvatarUpload (file) {const isLt2M = file.size / 1024/1024 < 10; if (! IsLt2M) {this.$message.error(' upload profile picture size cannot exceed 10MB! '); } return isLt2M; }Copy the code

The last

I am aCode pipi shrimpI am a mantis shrimp lover who loves to share knowledge. I will keep updating my blog in the future. I look forward to your attention!!

Creation is not easy, if this blog is helpful to you, I hope you can == a key three! ==, thanks for your support, see you next time ~~~

Share the outline

Big factory interview questions column