您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

编辑项目的模态框样式(laravel11)

发布时间：2024-11-03 19:02:25编辑：雪饮阅读（）

在编辑项目的模态框样式之前我们首先需要处理下文件上传问题。其实我们之前写的文件上传还是有个bug，就是如果用户没有选择文件，就会报错。
所有project控制器的update方法应修改如
public function update(ProjectUpdateRequest $request):RedirectResponse
{
    $this->log(var_export($request->user(),true));
    $this->log("uid:".$request->user()->id);

    $project=new Project();
    $file=$request->file('avatar');
    if($file){
        $path=$file->store('','public');
        $url = Storage::url($path);
        $project->avatar=$url;
    }


    $uid=$request->user()->id;
    $name=$request->input("name");
    $category=$request->input("category");
    $project->uid=$uid;
    $project->name=$name;
    $project->category=$category;
    $project->save();

    return Redirect::route('project.index');
}
那么接下来就是编辑项目的模态框样式。
这个样式确实有点不妥当，主要是图片上传按钮和图片上传后的回显。
那么我要优化成这样

用这个代替原来的图片上传和回显的元素
<div style="display: flex;height:100px;align-items: center;justify-content: flex-start;">
    <InputLabel for="name" value="Avatar" />

    <input type="file" @input="fileChange($event)" style="width: 0;height:0;margin:0;" id="avatarFile" />

    <template v-if="form.src">
        <img :src="form.src" style="width:4rem;height:4rem;border-radius:9999px;margin-left: 1rem;cursor: pointer;" @click="clickAvatar"/>
    </template>
    <template v-if="!form.src">
        <img src="/images/1.gif" style="width:4rem;height:4rem;border-radius:9999px;margin-left: 1rem;cursor: pointer;" @click="clickAvatar"/>
    </template>
</div>
当然这里用了自定义函数clickAvatar也是需要声明下
const clickAvatar=()=>{
document.getElementById("avatarFile").click();
}
这里有使用一个默认图片，就是当你没有上传图片的时候使用的那个默认图片先预览。
所以对应的project控制器的update方法也需要优化下
public function update(ProjectUpdateRequest $request):RedirectResponse
{
    $this->log(var_export($request->user(),true));
    $this->log("uid:".$request->user()->id);

    $project=new Project();
    $file=$request->file('avatar');
    if($file){
        $path=$file->store('','public');
        $url = Storage::url($path);
        $project->avatar=$url;
    }
    if(!$file){
        $project->avatar="/images/1.gif";
    }


    $uid=$request->user()->id;
    $name=$request->input("name");
    $category=$request->input("category");
    $project->uid=$uid;
    $project->name=$name;
    $project->category=$category;
    $project->save();

    return Redirect::route('project.index');
}