javascript - 使用 vue-wysiwyg 上传图片的问题
问题描述
我在我的 laravel-vue 应用程序中使用vue-wysiwyg 编辑器。在这个编辑器中有一个上传图片的选项,通过这个包的不完整文档,我可以上传图片并获取上传文件的公共 url。但是这个包有时有效,有时根本不起作用。
这是我如何使用这个包
main.js
import wysiwyg from "vue-wysiwyg";
Vue.use(wysiwyg, {
forcePlainTextOnPaste: true,
image: {
uploadURL: "/api/save-support-files",
dropzoneOptions: {}
},
});
/api/保存支持文件
public function uploadUserFile(Request $request)
{
$uploadedFile = $request->file('file');
if (false == $uploadedFile) {
return response()->api(false, 'Kindly upload a file');
}
$allowed_file_extentions = [
'jpeg',
'png',
'jpg',
'gif',
'svg'
];
if (false == in_array($uploadedFile->getClientOriginalExtension(), $allowed_file_extentions)) {
return response()->api(false,'Allowed file types are jpeg, png, jpg, gif, svg',null);
}
$file_url = Storage::disk('public')->putFileAs('/support-files',$uploadedFile,generateRandomString('5').'.'.$uploadedFile->getClientOriginalExtension());
// return response()->api(true,'File uploaded successfully',config('app.url').'/storage/'.$file_url);
return config('app.url').'/storage/'.$file_url;
}
我现在面临的问题:
一旦我从文件浏览器中选择图像,图像就会通过 api 成功上传,但它没有显示在编辑器中。
无法选择已经上传的图片,我必须刷新页面,然后再次选择文件再次上传。
有没有人可以解决这个问题?请帮帮我。
解决方案
我的上传存储功能如下所示:
public function store(Request $request)
{
$request->validate(['file' => 'required']);
$file = $request->file('file');
if ($file->isValid()) {
$path = $file->storePublicly(now()->format('Y' . DIRECTORY_SEPARATOR . 'm' . DIRECTORY_SEPARATOR . 'd'));
return response(Storage::disk('public')->url($path), Response::HTTP_CREATED)->withHeaders(
[
'content-type' => 'text/html'
]
);
}
abort(Response::HTTP_BAD_REQUEST);
}
确保您已设置完整APP_URL
的.env
url ( http://my-site.com )
确保你跑php artisan storage:link
推荐阅读
- delphi - TeeChartVCLFMX-2018.24 和 Builder 10.2.2
- javascript - 从 poup ajax 获取 fancybox 调用
- javascript - jquery可拖动,拖动后查看div内容
- java - 如何修复位图上 getWidth() 中的空错误
- azure - 我们如何知道 Azure 应用服务“与预览版交换”何时完成?
- php - 0 字段是必需的。Laravel 5.5 验证错误
- python - 写入 CSV 时出现 UnicodeEncodeError
- java - 使用 Netty 的 EventLoop 确定性地执行计划任务
- php - 当从数据库中选择菜单时,PHP MySQL 保留下拉菜单中的选定选项
- tomcat - tomcat 8.5 servlet 参数:webappBasePath