Загрузка файла element-ui изменить имя файла

JavaScript

техническое образование

Vue + axios + element-ui

Проблема возникает

В страстную пятницу я радостно набирал коды, когда вдруг получил загадочное сообщение от продукта, а онлайн-мероприятие отсутствовало.BUG! Нани! Как это может быть! Это должно быть, как вы открываете его неправильно! Когда я открыл скриншот сообщения, фон онлайн-чата внезапно превратился в другую, не относящуюся к делу картинку (большое солнце), и когда я ее увидел, это была не та картинка, которую я только что загрузил! Зачем ты побежал туда!

выявить проблему

我们所有的静态资源（比如图片）都会上传到一个服务器上，在活动中访问时会统一访问静态资源服务器，而静态资源上传时并没有处理重名问题！ ! !接口侧仅仅是在前面加了一个4位数的随机数，也就是说，当同名图片超过 10000 张时，百分百会有图片被覆盖！ !没错是直接覆盖而不是报错！即使不到10000张，同名数量越多，被覆盖概率也就越高。

Начинать

Не паникуйте, если у вас возникли проблемы! Пока горшок брошен хорошо, все проблемы не проблемы! Я пошел прямо к человеку, отвечающему за кулисы, и описал ситуацию, только чтобы увидеть, как он спокойно сказал: «Это не мое».KPI. ? ? ? Я х**ю тебе хх, мужики большие копытца! Полагаться на других недостаточно, вы можете полагаться только на себя или сделать это самостоятельно.

попробуй быть ленивым

element-uiПосле стольких лет простоя я верю, что он сможет выполнить важную задачу по изменению имени файла, поэтому я открываю официальный документ с большим нетерпением, очень хорошо! не поддерживается! Сейчас 6:30 вечера пятницы, очень хорошо, но мне суждено, что я больше не смогу хорошо поесть!

Блокировать загрузку файлов

файловый объект (file) не может напрямую изменить имя файла.file.nameЭто свойство доступно только для чтения.Если вы принудительно присваиваете значение, оно напрямую сообщит об ошибке, поэтому его можно будет только перехватить.element-ui -> uploaderПоведение загрузки по умолчанию изменено на загрузку самостоятельно. Ниже находится ядроHTMLкод, в основном с использованиемbefore-uploadсобытие для предотвращения загрузки

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

beforeUploadкод: сfile.nameявляется свойством только для чтения, то можно создать только новоеfileобъект. Ты недобрый, не упрекай меня за неправедность! Новое имя файла представляет собой метку времени + исходное имя файла.

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

uploadFileКод: построитьFormDataОбъект, вот и все!

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)
}

postFormкод: использоватьaxiosБиблиотека загружена на сервер.

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 || '文件上传失败')
        }
    }).catch((err) => {
        this.$message.error(err.message || '文件上传失败')
    })
}

Вот и все! В будущем все загружаемые файлы будут автоматически снабжаться префиксом временной метки.Фоновый 4-значный механизм случайных чисел + временная метка + имя файла.Если вы хотите скрыть это, это так же сложно, как программисту найти девушку!

Категории