Проблема с перезаписью файла при загрузке со страницы браузера (Vue 3, ASP .Net 6)

Рейтинг: 2Ответов: 1Опубликовано: 05.07.2023

Столкнулась со следующей проблемой. У меня есть написанное WebAPI приложение на .Net 6, к которому с запросами обращается фронт, написанный на Vue 3. В разных местах приложения необходимо загружать файлы. Если файл загружаю в первый раз, проблем никаких, но стоит попробовать загрузить файл с таким же именем - начинаются проблемы.

Сначала я на странице в браузере выбираю файл, который нужно загрузить. Затем через axios отправляю POST запрос на сервер, где этот файл должен сохраняться.

let formData = new FormData();
formData.append('file', this.file);
axios({
   method: 'post',
   url: '/admin/offer/save',
   headers: { "Content-Type": "multipart/form-data" },
   data: formData
}).then((request) => { show_message(request); });

Далее на сервере этот файл сохраняю.

DirectoryInfo dirInfo = new DirectoryInfo(uploadsFolder);
if (!dirInfo.Exists)
    dirInfo.Create();

var file = Request.Form.Files[0];
string fileName = file.FileName;
string path = System.IO.Path.Combine(uploadsFolder, fileName);

using (var fileStream = new FileStream(_appEnvironment.WebRootPath + path, FileMode.Create))
{
    await file.CopyToAsync(fileStream);
}

Я пробовала FileMode.Create, так как нужно, чтобы новый загруженный файл перезаписывал старый. Пробовала удалять из папки старый и записывать новый файл. Ни одно, ни другое не помогло решить проблему. Код C# отрабатывает нормально, файл перезаписывается, данные в БД уходят нормально, но на странице выскакивает ошибка SocketException: Удаленный хост принудительно разорвал существующее подключение. Думала попробовать при сохранении файла сразу давать ему уникальное имя, но когда пробую менять имя файла, снова - код C# работает нормально, в БД сохраняет корректно, но в этом случае в консоль браузера выходит ошибка

GET http://localhost:50598/js/12.js [HTTP/1.1 500 Internal Server Error 2492ms]
Загрузка <script> по адресу «http://localhost:50598/js/12.js» не удалась. add_factory_order:1:1
[Vue Router warn]: ChunkLoadError: Loading chunk 12 failed.
(error: http://localhost:50598/js/12.js) vue-router.esm-bundler.js:62
Uncaught (in promise) Error: Couldn't resolve component "default" at "/show_factory_order/:id"
    extractComponentsGuards vue-router.esm-bundler.js:1959
    promise callback*extractComponentsGuards/< vue-router.esm-bundler.js:1957
    runGuardQueue vue-router.esm-bundler.js:3213
    promise callback*runGuardQueue/< vue-router.esm-bundler.js:3213
    runGuardQueue vue-router.esm-bundler.js:3213
    navigate vue-router.esm-bundler.js:2980
    promise callback*navigate vue-router.esm-bundler.js:2972
    pushWithRedirect vue-router.esm-bundler.js:2867
    push vue-router.esm-bundler.js:2816
    formSubmit add_factory_order.vue:201
    promise callback*formSubmit add_factory_order.vue:196
    4 add_factory_order.vue:18
    callWithErrorHandling runtime-core.esm-bundler.js:157
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:166
    invoker runtime-dom.esm-bundler.js:345
vue-router.esm-bundler.js:1959

И так во всех местах, где я пытаюсь загрузить файл. Подозреваю, что какая-то проблема возникает именно во Vue. Но что именно и как это решить совершенно не понимаю.

asp.net-web-api asp.net vue.js vue3 filestream
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Проблема действительно заключалась в том, что имя файла нужно было менять до отправки на сервер. Написала метод, который добавляет в конец имени файла рандомную строку

export function insertSubstringBeforeExtension(filename) {
    const dotIndex = filename.lastIndexOf('.');
    if (dotIndex === -1) {
        // Расширение файла отсутствует, просто добавляем подстроку в конец
        return filename + randomString;
    }
    const extension = filename.slice(dotIndex); // Получаем расширение файла
    const filenameWithoutExtension = filename.slice(0, dotIndex); // Получаем имя файла без расширения
    const randomString = Math.random().toString(36).substring(2, 8); // Генерируем случайную строку
    return filenameWithoutExtension + randomString + extension;
}

И потом вызвала его перед отправкой (новое имя файла я положила в третий параметр FormData)

let formData = new FormData();
formData.append('file', this.file, insertSubstringBeforeExtension(this.file.name));