我有這個(gè)上傳圖片的項(xiàng)目，我用Uppy它。這是我的代碼：...<div id="drag-drop-area" name="fotografije[]"></div><script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script> <script> var uppy = Uppy.Core() .use(Uppy.Dashboard, { inline: true, target: '#drag-drop-area' }) .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}) //you can put upload URL here, where you want to upload images uppy.on('complete', (result) => { console.log('Upload complete! We’ve uploaded these files:', result.successful) }) </script>...我試過name="fotografije[]"indiv但當(dāng)然沒有幫助。我所需要的只是命名這個(gè)輸入，以便我的圖像可以上傳到服務(wù)器。我怎樣才能做到這一點(diǎn)Uppy？
2 回答
繁星coding
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個(gè)贊
所以你需要使用 Uppy Dashbord 和 Laravel 下載多個(gè)文件
然后你必須取回從前端發(fā)送到控制器（在你的后端 Laravel 中）的請求，該控制器將此請求作為 Ajax POST 處理。
這可能看起來像（在 routes.php 作為 POST 添加之后）
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class UploadFileController extends Controller
{
public function showUploadFile(Request $request) {
? ? $file = $request->file('fotografije');
? ? //Display File Name just for check or do a dd
? ? echo 'File Name: '.$file[0]->getClientOriginalName();
? ? //Move Uploaded File
? ? $destinationPath = 'uploads';
? ? $file->move($destinationPath,$file->getClientOriginalName());
?}
}
另外，不要忘記將 crsf 令牌添加到您的 uppy 代碼中以避免錯誤請求。
慕的地8271018
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
你可以這樣做
var uppy = new Uppy.Core({
// debug: (...args) => console.debug(`[Uppy] [${getTimeStamp()}]`, ...args),
// warn: (...args) => console.warn(`[Uppy] [${getTimeStamp()}]`, ...args),
// error: (...args) => console.error(`[Uppy] [${getTimeStamp()}]`, ...args),
autoProceed: true,
restrictions: {
maxFileSize: 2000000,
maxNumberOfFiles: 10,
minNumberOfFiles: 1,
allowedFileTypes: ['image/*']
}
});
uppy.use(Uppy.Dashboard, {
target: ".UppyDragDrop",
inline: true,
showLinkToFileUploadResult: false,
showProgressDetails: true,
hideCancelButton: true,
hidePauseResumeButton: true,
hideUploadButton: true,
proudlyDisplayPoweredByUppy: false,
locale: {} });
紫衣仙女
TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊
你可以這樣做
//this function runs after the file is uploaded
uppy.on('upload-success', (file, response) => {
const url = response.uploadURL
//get the name of file
const fileName = file.name
let text = "";
//append the image after form using jquery/javascript
//and you can send your images through form
response.body.data.forEach(function (item, index) {
text += index + ": " + item ;
jQuery('<input>').attr({
type: 'hidden',
id: '',
class: 'product_images',
name: 'filename[]',
value:item
}).appendTo('#form_id');
});
})
- 2 回答
- 0 關(guān)注
- 248 瀏覽
添加回答
舉報(bào)
0/150
提交
取消