Technical background

Vue + axios + element-ui

Emergence of a problem

One beautiful Friday, I was happily coding when I received a mysterious message from the product that there was a BUG in the online activity! God’s! No way! You must be opening it the wrong way! When I opened the screenshot of the message, the background of one of the online chat rooms suddenly changed to another unrelated picture (a big sun). When I looked at it, I realized that this was one of the pictures I had just uploaded. Why did he end up there?!

Problem orientation

All of our static resources (such as images) are uploaded to the same server, and the static resource server is accessed uniformly during the activity, and the static resource upload does not handle the same name problem!! Interface side just add a random number of 4 digits in front, that is to say, when more than 10000 pictures with the same name, there will be 100% pictures covered!! That’s right overwrite instead of reporting an error! Even if there are less than 10,000 copies, the more copies with the same name, the higher the probability of being covered.

Start to jilt pot

Don’t panic when you encounter problems! As long as the pot swinging good, all problems are not a problem! I went directly to the person in charge of the background and described the situation, only to see him quietly say: This is not my KPI. ????? I ** * you **, men are big pig hooves! We can’t rely on others. We can only rely on ourselves. Let’s do it ourselves.

Try to be lazy

Element-ui has been around for so long that I’m sure it will be able to complete the task of changing the file name, so I opened the official document with great anticipation. Does not support! It’s 6:30 on a Friday night, great, doomed to not eat properly again!

Blocking file upload

You can’t directly modify the file name of a file object. File. name is a read-only property, so if you force the value, you will get an error, so you must block the default uploading behavior of Element – UI -> Uploader. Here is the core HTML code, which uses the before-upload event to prevent uploads

<el-upload :before-upload="beforeUpload">
    <i class="el-icon-plus" />
</el-upload>
Copy the code

BeforeUpload code: Since file.name is a read-only property, you can only create a new file object. You are not benevolence, do not blame me injustice! The new file name is timestamp + original file name.

beforeUpload(file) {
    const timeStamp = new Date() - 0
    const copyFile = new File([file], `${timeStamp}_${file.name}`)
    this.uploadFile(copyFile)
    return false
}
Copy the code

UploadFile code: Build a FormData object, that’s all!

uploadFile(file) {
    const formdata = new FormData()
    formdata.append('lbf-file-upload', file)
    formdata.append('name'.'lbf-file-upload')
    formdata.append('_csrfToken'.this.$ajax.getCsrfToken()._csrfToken)
    this.postForm(formdata)
}
Copy the code

PostForm code: Upload to the server using the AXIos library.

postForm(formdata) {
    this.$ajax.post('/xxx/ajax/general/file/files', formdata).then(res= > {
        if (res.code == null || res.code === 0) {
            // do something
        } else {
            this.$message.error(res.msg || res.message || 'File upload failed')
        }
    }).catch((err) = > {
        this.$message.error(err.message || 'File upload failed')})}Copy the code

That’s it! In the future, all file uploads will automatically be prefixed with time stamp, background 4 random number mechanism + time stamp + file name, to cover, it is just as difficult as a programmer looking for a girlfriend!